BEST TECHNIQUE TO STYLE A FLEXIBLE WEB BUTTON

There are many ways to style a web button, for myself, I always use the same method. Today, we are going to demonstrate how to style a button from scratch. We are going to use this lovely design from favbulous PSD repository:

As you can see, this button comes with many colors and different button states. In this tutorial, we will use grey, red, blue and green colors. You see, if we cut all them out as an individual button, that's a lot of images! We have a solution here, that's right... we will be using CSS image spritetechnique in this tutorial. The main advantage of CSS sprite is - it reduces HTTP request by grouping all images into one, thus enhances website render speed.

PREPARING IMAGE SPRITE

Preparing an image sprite can be very tricky especially for button. First of all, we need to know that this button will be flexible, which means the width of button will expand according to the caption length. This is how we do it, we divide the button into two sections - body and tail. Then, We added extra width to the button body to 200px and move all the tails to the bottom. This is the result of our image sprite:

 

STYLE IT UP

Alright, we have the image sprite ready, now is the time to implement it. As we mentioned before, this button is divided into body and tail. In the context of HTML, body is used as the background forspan inside the a and tail is the background for a. Another illustration of how we combined it together.

 

HTML

<a href="#" class="button"><span>Submit</span></a>    
<a href="#" class="button red"><span>Download</span></a>
<a href="#" class="button blue"><span>Search</span></a>    
<a href="#" class="button green"><span>Demo</span></a>    

One thing about this tutorial though, we no longer make thing for IE6, because it sucks. We tested it on IE7, 8, 9, FF, Safari, Chrome and Opera. The reason we brought this out because we are using display: inline-block in the CSS which is not supported by IE6. However, to make sure it'll still look good in IE6, we gave it a fixed width to solve the problem.

CSS

a.button {
    background: transparent url('buttons.png') no-repeat right -384px;
    height:32px;
    display:inline-block;
    padding-right:23px;
    text-decoration:none;    
    font-family:arial;
    font-size:12px;        
    font-weight:700;        
    color:#555;        
}
a.button span {
    display: block;
    width: 100%;
    height:32px;    
    padding-left:12px;
    line-height:25px;
    text-align:center;                
    background: transparent url('buttons.png') no-repeat left 0;
    text-shadow: 0px 0px 4px #fff;
}
a.button:hover {
    background-position: right -416px;
}
a.button:hover span {
    background-position: left -32px;
}    
    
a.button:active {
    background-position: right -448px;
}
a.button:active span {
    background-position: left -64px;            
}            
/*
* Different color
*/
/* red */
a.button.red {
    background-position: right -480px;    
    color:#913944;
}
a.button.red span {
    background-position: left -96px;        
}
    
a.button.red:hover {
    background-position: right -512px;    
}
a.button.red:hover span {
    background-position: left -128px;        
}
    
a.button.red:active {
    background-position: right -544px;    
}
a.button.red:active span {
    background-position: left -160px;        
}                
/* blue */    
a.button.blue {
    background-position: right -576px;    
    color:#42788e;
}
a.button.blue span {
    background-position: left -192px;        
}
    
a.button.blue:hover {
    background-position: right -608px;    
}
a.button.blue:hover span {
    background-position: left -224px;        
}
    
a.button.blue:active {
    background-position: right -640px;    
}
a.button.blue:active span {
    background-position: left -256px;        
}                
/* green */    
a.button.green {
    background-position: right -672px;    
    color:#5d7731;
}
a.button.green span {
    background-position: left -288px;        
}
    
a.button.green:hover {
    background-position: right -704px;    
}
a.button.green:hover span {
    background-position: left -320px;        
}
    
a.button.green:active {
    background-position: right -736px;    
}
a.button.green:active span {
    background-position: left -352px;        
}

Some tweak to make it look consistent in IEs. Fixed width for IE6 because it doesn't support display: inline-block

CSS

<!--[if IE 6]>
<style type="text/css">
a.button {
width:60px;
}        
</style>
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
a.button {
    padding-right:11px;
}        
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
a.button span {
    line-height:27px;
}        
</style>
<![endif]-->   

That's it. We have just make a flexible button which adapt to the caption length (Although 200px might be too short for you but I think it's long enough to meet most needs) and easy to switch between colors.

 

I hope you get something out of this tutorial and we will be focus more on User Interface. If you want more free button PSD, browse around favbulous UI repository, we have more than 300++free PSD collection!

 

转：http://favbulous.com/post/211/best-technique-to-style-a-flexible-web-button