Blog
7. May 2010
Stop buttons without click effect!
Sorry, i know this has nothing to do with moneybook, but i hate, yes really hate buttons without click effect! It feels so unnatural when you click on it. So i feel me morally obliged to show how to make a click effect with CSS.
1. First you need the 3 states of a button in one image. You can also do it with two, but hey we want a hover effect you know 
2. After this you can write some code like this.
HTML
Everything what you need is a a tag between a p tag with the ID “clickable”.
CSS
If your image with the 3 buttons is 300px height so you have to put 100px for the height (image height divide by three)
p#clickable a {
float : left;
width : 125px;
height : 100px;
background : url(clickable.png) no-repeat;
cursor: pointer;
}
p#clickable a:hover {
background-position : center;
}
p#clickable a:active {
background-position : bottom;
}
So that’s it! Let us make this world to a better place with clickable buttons!
Mathias - 7. May 2010
I defiantly agree! You should however also add “pointer: cursor;” on all your buttons
Mathias - 7. May 2010
Whoops, the other way around of course; “cursor: pointer;”
Mischa (Admin) - 7. May 2010
@Mathias thx!
David - 7. May 2010
On the send button of you contact page (and blog comment post) you didn’t set a “pressed” state…
Mischa (Admin) - 7. May 2010
@David
Sorry but I have no idea what you’re talking about… hahaha pssssssssssssssssssst!
KnightBaron - 8. May 2010
Sorry to piss you off but, STOP USING ID WHEN YOU SHOULD USE CLASS!!
Id is used for identifying UNIQUE element such as header, footer, blah.
Mischa (Admin) - 8. May 2010
@KnightBaron
yes i know but this is not always the case. Sometimes you need the click effect for the navigation in your website and each site has its own unique link or button.
KnightBaron - 9. May 2010
@Mischa
Then shouldn’t you apply another clickable class rather than using id? If you can’t do that then I think your naming convention is wrong at some place.
btw, you app is great and a totally agree to your point about clickable effect. I just can’t stand people using non-standard HTML without a good reason.