Button methods?

[stevierg]

So I was watching the video tutorial which describes a three state button and I was wondering if this is a best practice?

Are there other good methods with CSS that are good for button skinning?

[cybershot]

i think it depends on your coding style and the site you are building. You were probably watching a video on css sprites. They are good because it lowers that amount of images you have to load. Everyone has their own style though

[devil-named-adam]

If the button is merely a link you can do something like this. Lets say your button is 200px wide by 30px tall.

If you want 3 states (normal, hover/focused, visited/active) then your sprite image will need all of those states in the same image (vertically stacked). It’s just a case of moving the sprite image (background) dependant upon what state the button it.

Code:

/* CSS */
a.button { width: 200px; height: 30px; /* but in your own dimensions */ display: block; background: url(“img/button_sprite.gif”) no-repeat 0 0; }
a.button:hover,
a.button:focus { background-position: 0 -30px; /* no need to declare your background again, just change the y-pos */ }
a.button:visited,
a.button:active { background-positionl: 0 -60px; /* change the y-pos again */ }

.hide { position: absolute; left: -999em; /* this may come in handy */ }

Button Text Will be Hidden, but it’s useful incase CSS isn’t applied

Hope that helps.

[Author]

Posts