27th of June 2010 0
Simple CSS buttons
Designing good looking and simple css buttons that work cross browser really isn’t that hard when you’ve done it a couple of times but for newcomers to css/xhtml it can be quite hard to understand the mechanics of css image sprites and all that so here’s a short design tutorial and example of css buttons.
Beginning in Photoshop
We begin our journey for the css buttons in Photoshop were we’ll create and test our buttons in an image sprite. I will not go into details on how to create buttons i Photoshop but something you should use is grids and snapping in order to make your life a bit easier later on. This is the final image for the example buttons:
A lot of buttons! You can make it more efficient by having the buttons more close together but you won’t save that much and the spacing will make it easier to work and test with later on if you decide to make any updates. A big note is that if you want to have an optimized site you should include the buttons in an overall large image sprite… but that’s another tutorial.
The buttons have three states: normal, hover and active. Active won’t work in IE without hacks or javascript but it’s still a nice thing to include for progressively enhancing the buttons for A-grade browsers.
Meet the XHTML
The XHTML code to produce the buttons isn’t really that hard but still need some extra markup in order to work:
Since we’ll be floating elements a variation could be to clear the button after its insertion:
<br style="clear: both;" />
On with the bloody CSS
The CSS is somewhat complex for newcomers by nature but as said, when you’ve done this a couple of times it won’t be that hard. Really.
a.btn { display:block; float:left; height:30px; line-height:30px; padding:0 0 0 15px; zoom:1; cursor:pointer; margin:10px 10px 10px 0; }
a.btn span { display:table-cell; background:url(img/cssbuttons.png) right 0; padding:0 15px 0 0; zoom:1; }
a.btn:hover { background-position: 0 -40px; color:#555; }
a.btn:hover span { background-position: right -40px; }
a.btn:active { background-position: 0 -80px; color:#555; }
a.btn:active span { background-position: right -80px; }
a.btn:focus {outline:0;}
Ok — what the hell are we doing here? Well…
First and foremost we are setting a background image to the link with class “btn”. The image that contains are our button images. Secondly we are telling the background to be positioned at “0 0″ (top left) and we also dump a bounch of styling like text-decoration:none etc.
Then comes the “hard” part. We need to display our button as block and float it, set the height to our buttons height, the line-height to the same height and apply padding to the left to a.btn.
We also need to style the span-tag and display it as a “table-cell” and apply padding to the right for it. We also here apply zoom:1 to fix layout issues in IE (line-height/height also fixes IE-issues).
The hover state
a.btn:hover { background-position: 0 -40px; color:#555; }
This is what happens on :hover. The background position shift from 0 0 (top left) to 0 -40px (left = 0, top = -40px) and we travel upwards in our image file thus the button changes color or whatever one would choose. The amount of pixels to move is all up to where you’ve been placing the buttons in Photoshop. You’ll have to check where the buttons are in relation to each other and set a minus value that corresponds with it.
We also need the span-tag within the button to move so we apply the same values to it as seen in the CSS-snippet above.
Since we also would like to have an active-state for the buttons we also apply the same logic to them but changing to minus value more to correspond with the active-image we got.
You should check the example out and its source code for further reading and getting a grip on how to handle css buttons. And as always feel free to ask anything or just drop a comment about this.
Share it!
Was it good for you to?
Related posts
Similar posts to this oneSponsors
Support for the site!Your opinion matters. Add it below.
