[CSS]デスクトップ・スマホ対応、浮かんだり光ったりアニメーションするボタンを簡単に実装できるスタイルシート

外部ファイルを一つ加えるだけで、さまざまなボタンを簡単に実装できるスタイルシートを紹介します。

鋭角や角丸の矩形、楕円形、ハンバーガーメニューに使われる円形、グラデーションやフラット、ゼリーみたいなボタンもあります。

Bttn.css
Bttn.css -GitHub

• Bttn.cssのデモ
• Bttn.cssの使い方

Bttn.cssのデモ

デモではボタンの実際の動作を確認できます。
上部から、ボタンのカラーとサイズを変更できます。

デモページ: ミドルサイズ

デモページ: Xスモールサイズ

デモページ: スモールサイズ

デモページ: ラージサイズ

オプションでブロック要素として扱うボタン、クリックやタップ時のアウトラインを表示・非表示に設定できます。

デモページ: ブロックボタン

ボタンのスタイルは全部で13種類が用意されており、それぞれ異なるアニメーションが楽しめます。

デモページ: ボタンのスタイル

Bttn.cssの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

スタイルシートは、CDNでも利用できます。

Step 2: HTML

button要素にボタンのスタイル・サイズ・カラーのclassを与えるだけで、完了です。