[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ

ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。

ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。

Animated Buttons with CSS3

[ad#ad-2]

• 基本となるHTML
• 7種類のデモ

基本となるHTML

Demo 1を例に、基本となるHTMLを紹介します。

Demo 1

ボタン内のテキストや画像は、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で、、、

ボタンはホバー時だけでなく、アクティブ時にもエフェクトがあります。

Demo 1

ホバー時にアイコンがアニメーションで拡大され、右側の矢印が強調されます。また、ボタンのシャドーが強くなり少し浮き上がります。
アクティブ時には、矢印が更に強調されます。

Demo 2

Demo 1とちょっとだけ異なるエフェクトです。
アイコンからテキストへ滑らかなアニメーションで変更されます。
アクティブ時には、矢印がくるっと回転します。

[ad#ad-2]

Demo 3

このデモはまったく異なるエフェクトです。ホバー時にボタンを拡大し、別のテキストを表示します。矢印も少し回転します。

Demo 4

ホバー時にボタンが水平方向にスライド拡大し、Demo 3と同様に追加のテキストを表示します。ボタンが開かれたようなイメージです。
アクティブ時にはボタン全体がフラッシュします。

Demo 5

ここで使用しているアイコンはシンボルフォントです。その理由はアイコンにtext-shadowを適用できるからです。滑らかなアニメーションと美しいシャドウに注目してください。

Demo 6

ここではボタンを星を内包した円形にしました。ホバー時には星がくるくる回転し、追加のテキストが表示されます。

Demo 7

box-shadowを使用してボタンを3Dにスタイルしました。ホバー時には全体が拡大し、アイコンが回転します。
アクティブ時には通常時より更に小さくなります。