Comments on: Create a Button with Hover and Active States using CSS Sprites

By: Karlotta

Karlotta — Sun, 07 Feb 2010 17:55:21 +0000

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!

By: Tim Lombardo

Tim Lombardo — Mon, 25 Jan 2010 03:57:10 +0000

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!

By: Tim Lombardo

Tim Lombardo — Mon, 25 Jan 2010 03:32:14 +0000

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!!

By: Dennis

Dennis — Thu, 14 Jan 2010 23:03:20 +0000

thanks! works now.
you can see the buttons here . bottom of the page
http://www.crushandshred.com/glass-bottle-crusher-for-a-bar

By: Tom Kenny

Tom Kenny — Sun, 10 Jan 2010 19:19:23 +0000

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:

Your link here

Your link here

By: Dennis

Dennis — Sun, 10 Jan 2010 18:39:33 +0000

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

Any help would be appreciated!

By: Tom Kenny

Tom Kenny — Thu, 03 Dec 2009 14:30:15 +0000

Paul â€“ Image problem should now be fixed.

By: paul

paul — Thu, 03 Dec 2009 13:18:22 +0000

I can’t see the first image and the sprite image in Chrome

By: 50 Fresh CSS Techniques, Tutorials and Resources - Noupe

50 Fresh CSS Techniques, Tutorials and Resources - Noupe — Wed, 02 Dec 2009 20:38:30 +0000

[...] Create a Button with Hover and Active States using CSS SpritesSome 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 just lazy. It’s a simple effect that improves usability by giving the user feedback as to what they’ve clicked on, and can add depth to a design. [...]

By: designfollow

designfollow — Fri, 06 Nov 2009 00:16:32 +0000

thanks for this great tutorial.