-2

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.

3
  • Have you tried anything at all? The idea is we help you with what you have, not do it for you.
    – haxtbh
    Nov 21, 2014 at 14:44
  • I'm not asking you to do it. I'm asking the best way to do it?
    – Rico Shaft
    Nov 21, 2014 at 14:47
  • I would like to do it with javascript but I have no idea how. I can do it easy with CSS animations @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } }
    – Rico Shaft
    Nov 21, 2014 at 14:57

1 Answer 1

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.