コピペで簡単にアニメーション付きのボタンを実装できる「Bttn.css」

2017/02/08

Bttn.cssは、コピペで簡単にアニメーション付きのボタンが実装できるスタイルシートです。

各ボタンのデモは、デモサイトにてご確認いただけます。

Bttn.cssの使い方

デモサイトもしくはGitHubからスタイルシートをダウンロードして、bttn.min.cssをサーバーに設置します。

<head>～</head>内に以下を追加して、スタイルシートを読み込みます。

<link rel="stylesheet" href="bttn.min.css">

デモサイトで使いたいボタンがあったら、[Copy code]をクリックします。

[Copy code]をクリックすると、以下のようなHTMLがコピーされますので、ボタンを設置したい場所に貼り付けます。

<button class="bttn-slant bttn-md bttn-primary">medium</button>

コピーされるHTMLはbutton要素になっていますが、a要素に変更しても特に問題はありません。

簡単にアニメーションするボタンが実装できますね。サクッとおしゃれなボタンを実装したい時は、ぜひご活用ください。

投稿者

慢性鼻炎のhimecasですヽ(^o^)丿誰か一人でも役に立ったと思ってもらえたら本望です。プロフィール詳細やお問い合わせについてはAboutページをご覧ください。