Create fluid Round Corner Button with rollover effect using one image

img btn 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
buttnbg Create fluid Round Corner Button with rollover effect using one image

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:

img btn Create fluid Round Corner Button with rollover effect using one image

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.

  • shweta

    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

  • emptywalls

    Holy crap! great technique! Elegant and simple. The reason youre seeing the problem in ie6 is because of the double margin flow bug. its floating to the left, and also has a margin to the left, triggering the bug. I believe display: inline will fix that, but may create additional headaches, id have to test to be sure.

    I’m defnitely using this effect on a site i was puzzling over…

  • Erika

    Really nice!!
    Since I don’t have the opportunity to set the doctype property on the pages I am working on, the IE8 displays it kind of funny.
    These changes fixed it for IE8 (also lookes good in firefox 3):
    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(http://hiddenpixels.com/wp-content/uploads/2008/12/buttnbg.jpg) no-repeat left top;
    height:40px;}

    a.lbutton span{
    display:block;
    float:left;
    background:url(http://hiddenpixels.com/wp-content/uploads/2008/12/buttnbg.jpg) no-repeat right top;
    height:40px;
    line-height: 40px;
    padding-left: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;}

  • altaf hussain

    Hi,
    thanks for this work really nice work.
    Can i use this for form input button? Please i need this.
    Thanks

  • Pingback: Create fluid Round Corner Button with rollover effect using one image – Hidden Pixels | VT Tech()