CODEWITHSUNDEEP
javascripthtmlcss
CodeMan
CodeMan

Reputation: 314

Button hovered and pressed ianages from normal button in CSS or Javascript?

I have three buttons, one is a normal button image, another is a button image when the normal button is hovered, and the third button image is when the normal button is pressed. My question is how to I transition to hovered and back to normal, and to pressed from normal images? Can I use CSS with this or javascript a better solution?

Upvotes: 0

Views: 107

Answers (1)

treyhakanson
treyhakanson

Reputation: 4911

It's quite simple with CSS:

.my-button {
   // normal styles
}

.my-button:hover {
   // hover styles
}

.my-button:active {
   // active (clicked) button styles
}

If you're going to be using background images, a good trick is to use a button sprite sheet, and just transition the background-position based on the button state. Here is an example.

Upvotes: 2

Related Questions