Pressed Button State With CSS
There is certain anchor state in CSS that I don’t see used very often — actually, it’s something I haven’t really used myself, but something which I now realize can be very useful. I’m talking about the “active” anchor state.
The active anchor state is the state an anchor (a link) is in when you click on it. The moment you click on a link, it becomes active. We all use the “hover” or “visited” states, but the active state can come in very handy when you’ve got custom styled buttons.
You see, on the desktop, whether on Windows, Linux or OS X, the buttons respond to you when you click on them. They visibly become pressed down, telling you that you’ve pushed them. This provides satisfying feedback to the user and makes the application feel more responsive.
On the web, such feedback is seldom given. You click on a button and nothing happens. In some browsers you’ll see a selection outline around the link or button while the next page is loading. Even buttons that have custom background images making them look like big solid buttons don’t do anything when you push them. They remain static and unresponsive.
It doesn’t have to be this way. Just use the “active” state to give your buttons a “pressed” look or whatever other look you wish. This will make your application or website stand out above the rest, as the experience will be closer to what the user is familiar to on the desktop rather than on the web.
Ok, enough chit chat, here’s what you do:
Say you have a button in your application that uses a custom image. The markup would look something like this:
<a id="button"></a>
It’s an empty anchor with an id. We can use this id to style the anchor. Our CSS would then look like this:
#button {
display: block;
width: 135px;
height: 43px;
background: url(button.png) no-repeat top;
}
We’re simply turning the inline anchor into a block, giving it a width and a height, and setting a background image. The button will look like this:
To add the active state simply append “:active” after the anchor selector:
#button:active {
background: url(button.png) no-repeat bottom;
}
Because my image contains both anchor states, we simply shift the background position to the bottom, which changes the look of the button to this:
Here’s the image I’m talking about, and here’s a live demo.
Let me know what you think. I would definitely like to see more active states used on the web. With just a couple of lines of CSS you can make your site or app feel more responsive.
[Update 16 Dec 2008] William has posted a useful link in the comments to enable the “:active” class in IE. Here’s the fix.
You shouldn’t even put the text “Click me” in the background image. It (probably) increases the file size and makes updating/editing the link itself harder. Just put the text in the anchor tag and use CSS padding and alignment to position it properly.
IE isn’t support
:activepseudo-class.IE isn’t support :active pseudo-class.
Sorry for double commenting, but it also occurred to me that you could remove the border from the image and apply it via CSS, then use a JavaScript library (or CSS3) to curve the corners. If you allowed the background to repeat horizontally, you could even accommodate buttons of any width, allowing labels of any size.
There are fixes for that, fatihturan.
William: Thanks for the link — very useful for IE development, although it’s one of those things where it degrades gracefully — nobody will suffer if they don’t see the active state.
Regarding my button implementation: the reason it’s so basic is because I didn’t have time to implement a “proper” solution and just wanted to focus on the active state, not the button CSS itself. In production scenario you should do what you suggested where the button text would be the anchor text, and the image would simply be the background. Even better if the image scales horizontally to accommodate more text (search for the Sliding-doors technique if anybody is not sure about this). So yeah, my button is pretty basic, no arguments there :)
You could also share those declarations with the :focus pseudo-class and have the button to be kept ‘pressed’ until the browser navigates to the link.
It can be quite useful sometimes, specially for slower connections.
Bruno: great point, I haven’t thought about this.
Nice technique, although IMO it’s better to add the behavior unobtrusively via Javascript than to rely on the :active pseudo-class + IE hacks.
In jQuery it’d be simple:
$(’a.button’).bind( ‘mousedown’, function(evt){ $(this).addClass(’pressed’); }).bind(’mouseup’) function(evt){ $(this).removeClass(’pressed’); });
Mike: I’m not too great with javascript so I tend to prefer CSS solutions, but that looks pretty simple. Thanks for the code :)
By the way, love you site.
I also add this to my button, to simulate the click effect:
#button:active {
position:relative;
top:1px /* or more */
}
mak: That’s interesting — literally pushing the button down. Good stuff.
Cool post , my blog navigation has pressed states aswell as active states, allot better for the user!
You could also wrap the button inside a a link and get all the pseudo-classes that way. This will work for even very old browsers.
But the question is: Should we even support those old browsers? (x < IE 6)
I don’t support those anymore, instead I asks the user politely to update (no javascript alert boxes here :D )
Those were just my 5 cents.
Regards Emil Melgaard - Tix’z Media http://www.tixz.dk/
I probably prefer javascript implementation (due to different browser behavior), but anyway the effect is cool ;)
I swear by this, but I go one step further. Add a :hover to this combo like this:
http://twitpic.com/ti3z
I generally don’t do this state, but I don’t have a good reason. I know it’s easy but it’s a half of a second *after* the click. Again, a usable interface is one that accounts for the details…
I think that regarding clickable elements, a hover state is par for the course in web design–regardless of that element being a button or link.
-Andrew
Definitively agree. I would just add :hover as well :)
Is there some kind of functionality in the HTML input that makes it a better choice than a link? Is it possible to skin the button in the same way?
[...] Dmitry Fadeyev on the Pressed Button State With CSS [...]
Thanks for starting us thinking ;-)
What about
img { border:solid 1px transparent; }
img:hover { border:solid 1px Silver; }
img:active { border:solid 1px Gray; }
for icons that have to be clickable
or just making the image from your sample semitransparent and just changing the background color on the active state? That would lead to smaller image sizes…
Why wouldn’t you just use a form?
The button already has the “active” functionality you are looking for.
You might add :focus into that too, for tabbers
Jim: Good question. A lot of web apps use custom styles and button images and also a lot of promotional sites do this, too. For example, big “Order now” buttons on product pages. Normal links are too subtle to use in those cases and default buttons aren’t very pretty.
@Max - The input and button elements are form controls, so they’re usually used to submit forms (and thus send data to the server for processing). The <a> element is more for hyper-linking to resources (pages, documents, etc).
All three can be styled to look roughly the same (although they do different things, so it’s not usually a good idea). Applying styles to form controls gets difficult very quickly though: Firefox, IE, Opera, Safari and Chrome will all do something subtly different :)
I work on a site that needs to be 508 compliant, which means navigation needs keyboard accessibility. How would you use keyboard accessibility with this?
Hi Dmitry!
I find this very interesting!
There is already an indication in the web browser that a button/link has been clicked on, the browser itself indicates this and gives the feedback to the user.
The other reason is that most of the users are already familiar with the way the links/buttons works in a web browser so. Sure, this is a perfect and necceseary way to give feedback to users on other platforms like touchscreens and desktops but I don´t think it´s necceseary to implemnent this behavior on web browsers. It doesn´t hurt to have this behaviour but I don´t belive that this behaviour increases the usability on a website.
[...] läste jag ett intressant inlägg på Usabilitypost som handlar om att man med hjälp av CSS ska visa att användaren klickar på en länk, i detta [...]
@Igor,
I disagree, I think it does add something useful for the user, they will know when they’ve clicked the button.
Ever sat there waiting for the page to load and then realized that you never actually succeeded in clicking on the link? :)
[...] Pressed Button State With CSS [...]
Nice post!
Thanks Ido :)
Myles: That happens to me all the time. Checking the status bar to see if you’ve clicked a link isn’t the most convenient indicator.
[...] Usability Post: Pressed Button State With CSS [...]
This does not seem to work with IE (7.0.5730.11).
I see this button being used in the http://www.logospire.com/login sign-up/sign-in pages, and the whole thing looks very messy; the button is stretched, and the button text/label is not centered (horizontally etc).
Just mentioning here ’cause you claimed that the feature degrades gracefully.
:-)
Works cool on Chrome, FF 3.0.5.
[...] Fuente: Usability Post [...]
Great simple example and tutorial, and I agree most people forget about active state. I personally don’t use it, I feel it looks a bit buggy like something broke when you clicked the link, especially with images but its personal preference!
Also:
For best results :active must come after :hover and :hover must come after :link and :visited in the CSS file for it to work as expected.
a:link {color: #900;}
a:visited {color: #999;}
a:hover {color: #090;}
a:active {color: #009;}
thx
[...] Just don’t go too far please. Keep it smooth and simple! Usability Post has a great article on how to achieve a nice state change with simple CSS. apple.com Navigation Bar Button States (normal, hover, click, [...]
[...] Pressed Button State With CSS - Dmitry Fadeyev [...]
[...] Just don’t go too far please. Keep it smooth and simple! Usability Post has a great article on how to achieve a nice state change with simple CSS. apple.com Navigation Bar Button States (normal, hover, click, [...]
[...] Pressed Button State With CSS [...]
[...] Pressed Button State With CSS [...]