ボタンhover時のいろいろなCSSアニメーションエフェクトです。各ボタン名が動きの名前になっています。それぞれhoverすると、エフェクトが発動します。エフェクトの長さはまちまちですので、少し長めにhoverしてください。
なお、日本語のwebページでの使用を想定して、オリジナルのfont-familyやボタンの形状などを変更しています。

 

 

サンプルのhtmlソース

  <div id="content">
    <ul>
      <li class="tada">TADA!</li>
      <li class="jello">Jello</li>
      <li class="stretch">Stretch</li>
      <li class="zoomIn">ZoomIn</li>
      <li class="flash">Flash</li>
      <li class="wobble">Wobble</li>
      <li class="flipX">Flip</li>
      <li class="rotate">Rotate</li>
      <li class="skew">Skew</li>
      <li class="pulse">Pulse</li>
      <li class="bounce">Bounce</li>
      <li class="shake">Shake</li>
    </ul>
  </div>