THIS TECHNIQUE IS NOW OUTDATED! It’s better to create buttons with CSS
Too many designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.
First, a look at the working button.
This is the finished version of what will be built for this tutorial.
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
The CSS Code
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; }Changing the first value would result in the background image moving left and right along the X axis. Obviously we don’t want that so the image is moved upwards along the Y axis as a negative value of the height of the button itself. This moves the hover state of the sprite into view when the mouse hovers over the link.
Click State CSS
As you can probably guess the click state will basically be the same but moving the button up again as follows:
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.
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.
Tweet
In case of using single stripe for all buttons which is the easiest way to to know x & y position of a particular button?
Divide image height by 3
Hey lol what a co-incidence.. I just used the same technique to give a glow effect to my button on being clicked
I think the CSS is the same because its quite simple but your visual effects rock and I suck at them 
Ooops sorry I forgot to mention that I set the height of the button as the height of the single button image. Hence instead of using numbers to change the image position, I just specified like this:
#order-button{
background-position: top;
}
#order-button:hover {
background-position: center;
}
#order-button:active {
background-position: bottom;
}
Hi Sumeet,
I applied the CSS sprites in the same way you did by declaring “Top, Center, and Bottom” background positioning. Perhaps Tom can explain what method is better and for instance…why would I want to use numbers instead of “top, center, bottom” positioning?
For some reason, I cannot get the “active” states to work. I’m gonna have to keep plugging away at it to figure out.
Thanks for reading,
Rob
look it
Darn, if only I could edit my previous comments, I wouldn’t have to post so many of them..
First I tried mine and it got stuck and then I tested yours. Apparently, the image stays in the active state after the first click and doesn’t change on hovering.
Anyway, I think this technique doesn’t work in Internet Explorer 7.0
Great technique that I use on my own site for the navigation.
I think this is the best job I’ve seen explaining it though. Bravo!
thanks for this great tutorial.
I can’t see the first image and the sprite image in Chrome
Paul – Image problem should now be fixed.
Tom,
I can get one button to work, but when I use (2) buttons on the same page, it wants to display two of the same button. I’m sure it is a coding problem as I’m new to CSS.
I place this into the style sheet .
a.button {
background: url(/button.png) no-repeat 0 0;
width: 270px;
height: 84px;
display: block;
text-indent: -9999px;
}
a.button:hover { background-position: 0 -86px; }
a.button2 {
background: url(/button2.png) no-repeat 0 0;
width: 270px;
height: 84px;
display: block;
text-indent: -9999px;
}
a.button2:hover { background-position: 0 -86px; }
I place this into the blog post
Button
Button
Any help would be appreciated!
Dennis, make sure you have assigned classes that match up with your CSS. For example any CSS properties assigned to a.button will only work on a link that contains class=”button”. See the code below:
Thanks Tom. This is a really good explanation of this topic.
thanks! works now.
you can see the buttons here . bottom of the page
http://www.crushandshred.com/glass-bottle-crusher-for-a-bar
Great tutorial, thanks for sharing. Just wondering how a person would use this same method but have the active state remain in active state once the button is clicked. I’m using this technique for a nav menu and would like the state to be active once a person is on that page.
Thanks again!!
Hah..figured out a simple solution, just created another class that is just the active state and will use that on the corresponding page. This is my first day coding with css, quite the newb, I’m sure I’ll be reading more and more of your content as I go on!
Actually, I would love to know how to keep the active state on as well. Or even how it’s called, so I can search for it elsewhere?
I’ve got a page with 6 buttons that send content into an iframe, and I’d like that button to remain lit up as long as the content is there (therefore, until another button is pressed!)
Any idea how to do this? Or how it’s called? Because I don’t know any other word than “active” to describe this, I can’t find it anywhere…
Million thanks if you can help me!
Nice work, ty for the tut, will test it today.
Loved the post.
I am taking the liberty of adding a reference to your article on my CSS aggregator site. Do let me know if you are ok with this.
This works with buttons that are part of an but what about buttons?
i like this efect, thanks for the tutorial
I’m new to this. So how does the HTML code go? I’ve got 2 buttons to do this with that will appear on the same page. What does the HTML code look like for each button?
Sorry, man.
I speak spanish, but i’ll try to write clearly my question.
How I can add a link to my button?
My button is this :
.down {
background: url(http://a.imageshack.us/img839/2235/downv.png) no-repeat 0 0;
width: 67px;
height: 19px;
display: block;
text-indent: -9999px;
}
div.down:hover { background-position: 0 -19px; }
div.down:active { background-position: 0 -38px; }
Well, now I have another question.
How I can make my button is on top of another image? I hope my English classes have helped me to improve my English hahaha greetings!
Nice work, I made this button on my HP and it looks nice.
Hello…
I am trying to achieve a menu with images only. The reason I have to do it this way is because the font I wish to use is non standard and therefore I need to create separate images for each button on the horizontal menu. I am very new to web design (html, css etc.) so please explain in laymans terms.
Basically, I have created three images for each button, one for normal, one for hover state and one for click state. They were originally 200 x 50 pixels each, so I have created a single image that is 200 x 150 as per the instructions here. Normal position on top, hover state image in the middle and the click state image down the bottom.
The part I am very confused about is how do I get this image to behave in the way this article explains. I cannot seem to get the image to display with only the required pixels showing. It keeps just showing the whole image (200 x 150). Let’s say as an example my image was stored on the URL: http://www.samplewebsite.com/menu/home.jpg. What exact code would I need to use to display this image and behave in the way this article explains? If possible, I need the whole section of html code not just the css.
In response to my own message above. I figured it all out! =)
I just needed to set up a for each menu button, then set up a wrapper . After that I used the float left command to get each button to display side by side horizontally. I guess that’s the only part that this tutorial leaves out as it assumes you already know how to set up each .
Anyway, the end result looks fantastic!
This blog post was super helpful to me in one of my projects. Thank you.
Easy to follow tutorial. Thanks man.
Hi, its really great help for creating “a hover” images button, I’ve been using a different technique by using two images URLs for this, but its really great that now I can use it very easily …
Thanks buddy..!
I just wanted to say thank you. It’s been a while since I’ve done web work and this is exactly what I was trying to recall.
I saw a couple of requests for the HTML and since it’s so simple, I figured I’d share:
That’s all it takes
Thanks again!!
Oops! I forget the code tags! Here’s the HTML:
Hi,
It seems there’s an issue with this using IE. If you take a close look, the hover image is not shown vertically in the right position using IE (you see it when comparing to other browsers). It seems the hover image would be a pixel too low, but actually you can’t fix this. At least I couldn’t after spending 3,5 hours with the problem. Does anyone have an idea for fixing this?
Br, Jussi
I thought it was a CSS3 button when I first saw title title…
I’m extremely new to this, so my question probably seems obvious to most of you. I made my 3 buttons and combined them in one image, but then I add the code to my style.css and nothing shows up when I launch the page.
This is the code I added:
a.button {
background: url(“instructions_button.png”) 50% 50%;
width: 150px;
height: 52px;
display: block;
text-indent: -9999px;
background-position: center;
}
Are you leaving out an obvious step that I may be unaware of?
Thanks.
Hi, I’m in the middle of building a site and I’ve set up my CSS rollover images which use a single sprite to show different button states, in my case just two, a greyed out state and a coloured state. I want the link to start with the greyed out image then change to colour when hovered then stay in colour for active state then greyed out for the visited state. These pseudo classes have all been set. The problem I have is that I want the button to stay in it’s coloured state until another button is clicked and then have it return to the greyed out link state when the other button is clicked. At the moment when I hover over the image and click then roll out, the image goes back to grey? I have the pseudo classes in order L V H A. Can I do it this way or do I need to go the Javascript behaviours route? I’m new, not a coder and rely on Dreamweaver. Any help would be very much appreciated and I’d be happy to show you the end result.
Kindest regards
Jack
London, England
Hi,
Right now I’m working on a teaser for my new website. Just a small quick website in HTML.
http://www.maartenvangent.nl/
Now I’m running into a problem: on the page there’s a box that says that I’m accepting new projects. With it there’s a button. If you click it, the button gets an :active state (with css styling) and the background of the box changes via Javascript.
Everything works fine accept on touch devices. Normally I could always use the :active state for styling the button-down effect when clicking soemthing on a touch device.
What am I doing wrong?
Thanks for this, very easy to follow and makes a big difference to the speed of loading the navigation
@tkenny, is there anyway to keep the button pressed in while on a particular page, then switch to a different a different button pressed in after pressing on that button? but you can see this effect on the navibar below the image splash at http://www.ox.ac.uk. they have three states:
normal: dark background, blue letters
hover: blue background, white letters
depressed: blue background, blue letters.
my site is essentially the same except that pressing the buttons makes the content below the navibar change.
I was wanted to create a my site’s logo in hover image. Thanks for your tutorial. It works cool.
I am hoping someone can help me here. I am new to CSS and I am using a content management system to edit HTML. I can not seem to make this effect work. I am imagining I am missing some HTML. I tried to follow Tom’s response to another post earlier, but I am having no luck. I am able to produce static and hover states in html alone, but I can not seem to figure out how to make the active state work. Any help would be appreciated.
I did what the tutorial said but it doesn’t work…
If you hold the mouse button down while the cursor is over the button and then drag the cursor off the button, it remains active and thus depressed. Any ideas on how to prevent this from happening?
Excelente aporte! Un saludo desde México!!!!!!!!!!!!
good one