Can anyone give me some advises; on the best way to create buttons with animated background position on hover.
Like the buttons on this page, about us, make a donation etc
http://nationallgbtmuseum.org/#/home/
many thanks for your input.
Can anyone give me some advises; on the best way to create buttons with animated background position on hover.
Like the buttons on this page, about us, make a donation etc
http://nationallgbtmuseum.org/#/home/
many thanks for your input.
You could make use of some CSS3 animation to achieve this.
One way of doing this is below. View this snippet in a webkit based browser like Chrome. You can adapt this for cross-browser by adding vendor-prefixes and the standard one.
Snippet:
div {
width: 240px; height: 240px;
border: 1px solid gray;
background-image: url(http://placehold.it/32/32);
background-position: -640px 640px;
}
div:hover {
-webkit-animation-duration: 20s;
-webkit-animation-name: anim;
-webkit-animation-timing-function: linear ;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes anim {
0% { background-position: -640px 640px; }
100% { background-position: 640px -640px; }
}
<div></div>