buttons with variable lenght and curvy corners

Hello there
I am stuck with this problem.
I know how to use the four graphics corresponding to the four states of the button (with curvy corners) which I want to use in a menu. Nevertheless,
the problem comes because I want the length of my button to be variable depending on the length of the text which appears on the button. This is due to the fact that the length of my button's text changes dynamically.
I would appreciate any suggestion since I am stuck with this problem and no successful strategy has come to my mind yet to solve this problem.
Thanks in advance.

 

Make the background image button way longer/wider then you will ever need, maybe 300px.
Now in styles make sure background-position is set to right.
Now creat an image of just the left side of the button, and insert that as an actual image with the link text.

The other option would be to do it how you have done. but without the sides (corners) then add them to seperate divs on either side of the button and use javascript to change the style of all three elements.

Not to sure if either solution is what you are after, but best I can do.

 

Whether your button is for a form or navigation, you can use a technique known as "sliding doors". I'm not sure of your problem though because <button> as a tag is quite different from a menu item. Can you provide some more info? A link, a screenshot, some code?

 

I have just followed the sliding doors method.
Do you know why this file caca.html shows a really hard edge in the middle of the left side and the right side of each button. It seems as if the join between left and right side of the button did not fit properly. However, it does when you preview both images in an image editor. Could anybody help me to remove that join?
Thanks in advance

 

want to post a screenshot so we can see what your talking about?

 

hello there
Somebody told me that the problem was because the gradient of the button was not only up to down but left to right. And it seems that lateral gradient does not work well with sliding doors method.
Anyways, I remove the lateral gradient and it is ok working almost ok now. My current problem is that in firefox the hover property of the left part of the button does not activate the the hover property of the right side of the button. That is to say, that when I put the mouse over the left part of the button, only this left part gets the hover color.

question1:
Does anybody know how to get that the right side of the button gets the hover color when I put the mouse on the left part of the button according to the sliding doors technique?

On the other hand, in explorer 6.0 , the hover property of the left side of the button does not seem to work even for the left part of the button. Moreover, when I put the mouse on the right side of the button, in contrast to firefox, this does not activate the hover of the left part of the button.

question 2:
Does anyone know how to solve these last issues?

I hope it is not forbidden to put websites names here. Please bear in mind this is not for comercial purposes but for asking a question.
Please look at this site www.metatradersoftware.com which contains the pane with the sliding technique where you will be able to check the why of my two questions. I wish that gives you some insight to my doubts.

Thanks in advance.

 

I don't have a lot of time to spend on this right now (quite busy) so I hope this helps:

<a href=""><span>Link Text</span></a>

a{}
a span{}

a:hover{}
a:hover span{}

Code (markup):

 

Thanks Greg,
your solution has worked great and it is simple. Thanks.

 

Sorry about that. I was in a hurry to leave earlier but wanted to post a solution as quickly as possible. I'm glad my hint in the right direction was all you needed.

Alternatively you can use <strong> instead if you want to give your links more importance.

 

I think,I am not sure I don't use it much, that if you do something for the width like

that will make it go 5 pixels after the end of the text... I am not sure though...

 

Not at all.

 

hmm... That is what it seemed like it did when I was playing with it... what does em do then?

 

1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.

Source - W3Schools.com