How to make sexy buttons with CSS - Improved

How to make sexy buttons with CSS - Improved

08
may
2007
Tagged as
Design
Web
CSS

del.icio.usdel.ici.ous Diggdigg FURLfurl Yahoo! My Web 2.0myweb Redditreddit

Yesterday I visitted an blog entry by Alex Griffioen about making sexy buttons with CSS. It was a good tutorial for on how to use CSS.

When I looked at his implementation, I was missing a hover effect on the button, so I decided the modify his implementation to make the hover effect possible.

As explained by Alex, the sexy button is created by using the Sliding doors technique and uses background image shifting to create the pressed state. By expanding the background image we can have a hover state on the button. The only thing need to be done is to add the :hover state with the correct vertical alignment for the background. The most difficult during this whole process was the correct modification of the background images

You can see the demo here.

Download all files: zip
Enjoy.

Update

11 may 2007 - Oran Sands notified me that the active state did not work. This has been fixed. Thanks Oran.

go back

I am not, under any circumstances, responsible for any damaged occured during or after reading this website. Please contact me at: ...... © 2006 Oguz Karadeniz. Rights could be reserved.