Create fluid Round Corner Button with rollover effect using one image


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.

5 comments

Comments are closed.