Placing And Image In A Button

[Enthusiastic Student]

HiLet's see if I can explain this well enough.I want to create a button with round corners. The button must be filled with an image and of course some text. The text must be above the image and the image itself must scale in width such that a button with more text is longer. However, there is a maximum width of the image.I've tried to do it here.My initial idea:

<a class="buttonlink" href="somelink.php">   <span class="buttonlink-leftend">	  <span class="buttonlink-rightend">		 <span class="buttonlink-image">			Hello World!		 </span>	  </span>   </span></a>

OR

<a class="buttonlink" href="somelink.php">   <span class="buttonlink-leftend">	  <span class="buttonlink-rightend">		 <img class="buttonlink-image" src="backgroundimage" alt="nice picture" />			Hello World!	  </span>   </span></a>

and some css:

.buttonlink {   height: 50px;   width: 150px;   background-image: url(images/backgroundslice.jpg);   background-repeat: repeat-x;}.buttonlink-leftend {   height: 50px;   width: 100%;   background-image: url(images/leftend.jpg);   background-repeat: no-repeat;   background-position: top left;}.buttonlink-rightend {   height: 50px;   width: 100%;   background-image: url(images/rightend.jpg);   background-repeat: no-repeat;   background-position: top right;}

The left and right end images look rounded such that the button will have round ends. They are not see-through so the backgroundslice image will be covered by them. The image which I want behind the text must be aligned right somehow since it matches up with the rightend image.My problem is:

• If I use the image as a background image I can't scale it.
• If I insert and image I have more control over how large it is, but then I can't control the text (text must be centered).

I realize that creating the button entirely as an image is easier, but I would like to be able to dynamically generate the buttons with different text.Hope you can helpEnthusiastic Student

[Jerry62704]

HiLet's see if I can explain this well enough.I want to create a button with round corners. The button must be filled with an image and of course some text. The text must be above the image and the image itself must scale in width such that a button with more text is longer. However, there is a maximum width of the image.I've tried to do it here.The left and right end images look rounded such that the button will have round ends. They are not see-through so the backgroundslice image will be covered by them. The image which I want behind the text must be aligned right somehow since it matches up with the rightend image.My problem is:

• If I use the image as a background image I can't scale it.
• If I insert and image I have more control over how large it is, but then I can't control the text (text must be centered).

I realize that creating the button entirely as an image is easier, but I would like to be able to dynamically generate the buttons with different text.Hope you can helpEnthusiastic Student

Looks like you could use rounded corners.