[CSS]classを加えるだけで素敵なボタンが実装できるスタイルシート -Buttonize

シンプルなボタンをはじめ、カラフルなボタン、アイコンを使ったボタン、背景を使ったボタンなどがclass名を加えるだけで簡単に実装できるスタイルシートを紹介します。

CSS3 Buttonize Framework - Light-Weight, Flexable Instant Button Framework

[ad#ad-2]

先日紹介した「CSS3 GitHub Buttons」もシンプルで使い勝手がよさそうでしたが、今回紹介する「Buttonize」もシンプルながらデザインも豊富に揃っています。

Buttonizeで実装したボタン

ちなみに、CSS3 GitHub Buttonsは下記のようにシンプルなボタンです。

参考：シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート

Buttonizeの実装

実装は、非常に簡単です。

Step 1

ダウンロードしたスタイルシートを外部ファイルとして記述します。

<link rel="stylesheet" type="text/css" href="buttonize.min.css">

Step 2

ボタンにする要素に、classを追加します。

<a href="#" class="button heart">Buttonize</a>

完成

2ステップで、下記のボタンが実装できます。

ボタンのキャプチャ

[ad#ad-2]

Buttonizeの対応ブラウザ

Buttonizeの対応ブラウザは、下記の通りです。

• IE9+
• Firefox3.6+
• Chrome10+
• Opera11+