Fresh CSS Techniques, Menus, Buttons, Forms Tutorials and Resources
The Design
First thing we need to do is open up photoshop and create a design for the button. In this instance, we want to make it look very distinctive as a button:
Here it’s nice and big for the demo just to make things nice and clear but buttons shouldn’t need to big as big as this for the majority of uses.
Hover State Image
We need to have a slightly different style for when a user hovers over the button just to give them an indication that the button is interactive and therefore clickable, a standard web practice.
The hover state is slightly darker than the normal static appearance but very noticeable difference when the user actually hovers over the element.
Click State Image
Now for the part that a lot of designers miss out on. We need a third state that changes when the user clicks on the button.
We’ve gone with the visual metaphor of an actual, physical button like ones you see on a mobile phone or mp3 player. The user then has an immediate recognition that a button performs a function when pressed.
A simple inner shadow, reversing the gradient and moving the text down one pixel achieves this effect nicely.
Sprite Image
The best practice is to combine all button states into one image and divide them out using CSS. This is because it:
- reduces http requests resulting in faster transfers
- prevents flickering effect caused by change of state by loading all states as one file
Now that we’ve brought the different states into a single image we need to tell the browser what part of the image we want when necessary through CSS.
The static, initial state of the button is defined in CSS as follows:
a.button { background: url(../images/button.png) no-repeat 0 0; width: 186px; height: 52px; display: block; text-indent: -9999px; }
The background image is positioned to the top and left with the width and height of the button being defined as to only show the top third of the sprite. The rest of the code is a simple image replacement technique on the <a> tag that has a class of ‘button’.
Hover State CSS
The hover state retains all properties and values with the exception of the background position as it’ll need to be pushed up to show the second part of the sprite as shown:
a.button:hover { background-position: 0 -52px; }
a.button:active { background-position: 0 -104px; }
Where Else Sprites Should be Used
If you’re navigation relies on images then all states can be combined into one big sprite image. Combining all buttons that appear one one page or a single section of your site into one image can be a great way to cut down on http requests. In fact I can show you the buttons I used on a recent project, all listed on a single page.
View the Buttons!
Just to show you what I mean about combining buttons onto a single sprite image take a look at this image. Buttons can be added to the end of the row without affecting any of the others.
This is a really good read for me, Must admit that you are one of the best bloggers I ever saw.Thanks for posting this informative article.
ReplyDelete