Question

Go to google, and without typing anything in, hover your mouse over the “I’m Feeling Lucky” button. See what it does?

I can’t think how to do that…on:hover….but the actual content and animation itself, how?

Answer 1

It’s not the button that’s animating.

They have a hidden div, positioned over the button. It’s absolutely positioned.
It contains a lot of spans with all the messages.

On hover, they use a function to move that div around, and make it visible.
It looks like the contents of the button are moving, but they aren’t really.

<button></button>
<div style="display: none; font-family: Arial,sans-serif; overflow: hidden; text-align: center; z-index: 50; height: 27px; position: absolute; left: 667px; margin: 0px; top: 45px; width: 114px;>
  <div style="left: 0px; position: absolute; right: 0px; white-space: nowrap; top: -29px;">
    <!-- spans go here -->
  </div>
</div>

See the value, -29px? That’s all that’s changing.