[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+

sponsors

top of page

©2018 coliss