[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ
Post on:2011年11月10日
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。
ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011111005.png)
[ad#ad-2]
基本となるHTML
Demo 1を例に、基本となるHTMLを紹介します。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011111006-00.png)
ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。
<a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <span class="a-btn-icon-right"><span></span></span> </a>
7種類のデモ
デモを楽しむには、Firefox, Chrome, Safari でご覧ください。いつものようにIEはたぶんIE10で、、、
ボタンはホバー時だけでなく、アクティブ時にもエフェクトがあります。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011111006-01.png)
ホバー時にアイコンがアニメーションで拡大され、右側の矢印が強調されます。また、ボタンのシャドーが強くなり少し浮き上がります。
アクティブ時には、矢印が更に強調されます。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011111006-02.png)
Demo 1とちょっとだけ異なるエフェクトです。
アイコンからテキストへ滑らかなアニメーションで変更されます。
アクティブ時には、矢印がくるっと回転します。
[ad#ad-2]
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011111006-03.png)
このデモはまったく異なるエフェクトです。ホバー時にボタンを拡大し、別のテキストを表示します。矢印も少し回転します。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011111006-04.png)
ホバー時にボタンが水平方向にスライド拡大し、Demo 3と同様に追加のテキストを表示します。ボタンが開かれたようなイメージです。
アクティブ時にはボタン全体がフラッシュします。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011111006-05.png)
ここで使用しているアイコンはシンボルフォントです。その理由はアイコンにtext-shadowを適用できるからです。滑らかなアニメーションと美しいシャドウに注目してください。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011111006-06.png)
ここではボタンを星を内包した円形にしました。ホバー時には星がくるくる回転し、追加のテキストが表示されます。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011111006-07.png)
box-shadowを使用してボタンを3Dにスタイルしました。ホバー時には全体が拡大し、アイコンが回転します。
アクティブ時には通常時より更に小さくなります。
sponsors