html - Simulate button effect with CSS background-image? -
i looking ways of putting kinda-custom buttons on site, using own images.
and found out interesting moment on formspring site. there 1 image file, states of button - hover , pushing.
like http://cdn.formspring.me/images/global/social-fsvaf743e61c7e51b26765c392c6ee597f7994ad03f.png
and image on background. wonder - possible css - changing part of background image show on hover , pushing?
may can provide example of how done?
you should change background-position
when different states triggered.
div{ background:url('http://cdn.formspring.me/images/global/social-fsvaf743e61c7e51b26765c392c6ee597f7994ad03f.png'); width:191px; height:29px; } div:hover{ background-position-y:-29px; }
check jsfiddle here: http://jsfiddle.net/apjr9/
Comments
Post a Comment