Creating Resizeable Buttons in CSS ...

Have you ever designed a page for a web application and wanted to make a nice button for the application? You probably opened your photo editor and started working on the button.

Have you ever designed a page for a web application and wanted to make a nice button for the application? You probably opened your photo editor and started working on the button. But, what if your design resizes itself based on the users browser size? You will probably want the button to resize as well. Well, over at CSS Globe they have written a script to do just that using CSS.

Below is an excerpt from the article explaining the concept.

    Concept

    This concept is probably familiar to you from various navigation tab styling techniques. We have one long background image:





This one is 550px wide. I believe that is more than sufficient for buttons

So, we apply this image as a background image of a top element (in this case SPAN), place it to top left and add some left padding. Nested element (in this case EM) have the same background image but placed to top right and with right padding. As the content text grows so will the button.


Height of the button is fixed in my example but you can use similar technique and some more markup and place the same background image to all 4 corners.

    To make sure that the text is vertically centered I use line-height property.

The HTML that is required for applying the CSS to would be the below.

    <button><span><em>Button text</em></span></button>

The below is the CSS that is used.

    button{
        border:none;
        background:none;
        padding:0;
        margin:0;
        width:auto;
        overflow:visible;                   
        text-align:center;   
        white-space:nowrap;   
        height:40px;
        line-height:38px;           
        }
    button span, button em{
        display:block;
        height:40px;
        line-height:38px;           
        margin:0;
        color:#954b05;
        }
    button span{
        padding-left:20px;
        background:url(bg_button.gif) no-repeat 0 0;
        }   
    button em{
        font-style:normal;
        padding-right:20px;
        background:url(bg_button.gif) no-repeat 100% 0;
        }

source: ajaxonomy

 View Full Story.