DigiPress

Highly Flexible WordPress Theme

メニュー

【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カラーのみで動的に変えられるボタンのカラーコードに対してアルファ値は利用できない

デモはこちら。

See the Pen Practical CSS Buttons by digistate (@digistate) on CodePen.

ボタンの基本コード

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

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

ボタンのフチを丸くする

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

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

マウスオーバー時に影をだす

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

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

Javascriptでタグを挿入しているボタン

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

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly
Send to LINE