【CSS】汎用性を重視したCSSアニメーションボタン30種類

WordPressテーマを制作する際、テーマごとでCSSボタン用の装飾(特にマウスオーバー時のエフェクト)をデザインするのですが、ユーザーがボタン用のセレクタのみで利用できるよう、一定の汎用性を考慮した条件下でデザインしています。

例えば、提供中のWordPressテーマでは、<a href="#" class="btn">ボタン</a> とするだけで以下のボタンスタイルでテキストを表示できます。

Clarityテーマのボタンデザイン

Luminousテーマのボタンデザイン

今回は、そんな汎用性重視のCSSボタンをひたすら30種類つくってみました。

汎用性を考慮したCSSボタンの要件

ボタンはボタン用のセレクタを持つタグでテキストを括るのみのHTML(例 : <a href="#" class="button">ボタン</a>)で構成する。
→ボタンデザインやエフェクトのためにspanやdivを入れ子にして括ったり、テキストの前後への挿入を必要としない。
ボタンのアニメーションのためのJavascriptを利用しない。
ボタン用のセレクタと同時にアイコンフォントなど::beforeに対してスタイリングされたセレクタが含められる可能性があるため、ボタンへの装飾として必要な場合は::after疑似セレクタのみにCSSをセットする。
ボタンカラーはユーザーが選べることを前提とするため、1カラーのみで動的に変えられるボタンのカラーコードに対してアルファ値は利用できない。

デモはこちら。

このサンプルでは、button　というセレクタを付けることで基本となるボタン用のベーススタイルを適用し、続けて one 〜 thirty の1〜30までの数字の単語を付けることで、それぞれのボタンデザインで表示できるようになっています。

<a href="#" class="button one">Button 1</a>

ボタンのフチを丸くするには、ボタン(button)、デザイン番号(one 〜 thirty まで)に続けて、rounded というセレクタを付けます。

<a href="#" class="button one rounded">Button 1 R</a>

ボタンのマウスオーバー時に下にシャドウを付けて距離感を表現するには、ボタン(button)、デザイン番号(one 〜 thirty まで)に続けて、hover-shadow　というセレクタを付けます。

<a href="#" class="button one hover-shadow">Button 1 S</a>

以下のボタン(3, 11〜15)については、ユーザーが記述する際のHTMLは他と全く同じコードですが、Javascript(jQuery)によってspanタグを挿入させています。