To create round corner Button or tab with fluid width is always bit headache for Designers, Here is a simple example of create rollover button with anchor link.
First let me show you a Live Demo of what we are going to create.
For example have a button in your website. The code would look something like this:
<a href="#" class="lbutton"><span>Button Text</span></a>
It is a Anchor Text with span, Our CSS would then look like this, We can apply “lbutton” CSS class in anchor:
a.lbutton{display:block;float:left; font-weight:bold; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS"; color:#FFFFFF; text-decoration:none; background:url(buttnbg.jpg) no-repeat left top; height:40px;}
a.lbutton span{display:block; float:left; background:url(buttnbg.jpg) no-repeat right top; height:30px; padding-left:10px; padding-top:10px; padding-right:25px; margin-left:15px; cursor:pointer}
a.lbutton:hover{background-position:0px bottom; color:#000000}
a.lbutton:hover span{background-position:right bottom;}
Button Background image should be like this
We are simply turning the inline anchor into a block, giving it fixed height and width will be according to text content of anchor, and setting a background image. The button will look like this:
Note: This Example is tested with IE7, Firefox, Opera and safari in Widnows. Please let me know if you find any bug or issue in this example, I will defiantly try to fix that issue.
Hi,
Awesome technique. But this does not work properly in IE 6.0. The space to the left of button text is very much more than right space. This makes it look awkward.
Please resolve!
-shweta