クラス付与でボタンデザインやホバーエフェクトを実装できるスタイルシート「bttn.css」

  • Posted on
  • Category : Tips
クラス付与でボタンデザインやホバーエフェクトを実装できるスタイルシート「bttn.css」

「bttn.css」はその名の通りボタンに関するスタイルを適用させるスタイルシートです。要素に用意された各クラスを付与することで、簡単にデザイン・サイズ・ホバーエフェクトなどを適用することができます。

bttn.css

使い方

使い方は簡単で、サイトからダウンロードするなどしたCSSをひとつ読み込み、あとは以下のサンプルコードのように適用したい要素に「bttn」から始まる各クラス名を記述するだけとなっています。
サンプルコードではbutton要素を使っていますが、a要素でも特に問題なく適用されました。

HTML

<button class="bttn-simple bttn-md bttn-primary">Button</button>

使用時にどのクラスを付与するか確認するのが面倒な場合は、デモサイトで簡単にコピーすることができるようになっており、目的の見栄えのボックスにホバーすると「Copy code」というのが右下に表示されるので、そこをクリックすればクラスが記述されたbutton要素のHTMLをコピーできます。

それぞれどのようなデザイン・エフェクト・カラーが用意されているかはデモサイトでも実際の表示を確認することができますが、簡単に紹介すると以下のようなものがあります。

デザイン・エフェクトは13種類

デザイン・エフェクトは13種類

デザインはシンプル・ミニマル・角丸・グラデーション・サークルなど全13種類で、それぞれホバー時のエフェクトも異なるものになっており、指定時は.bttn-slant.bttn-floatといったクラスを付与します。
現在は全13種類ですが、紹介エントリーで「more soon…」とのことなので、今後も増える可能性がありそうです。

カラーは6タイプ

カラーは6タイプ

カラーは全部で6タイプ用意されており、指定時は.bttn-default.bttn-primaryといったクラスを付与します。
ざっくりですがカラーと各クラス名との組み合わせは、それぞれ下記のようになっています。

  • ホワイト → .bttn-default
  • ブルー    → .bttn-primary
  • オレンジ → .bttn-warning
  • レッド    → .bttn-danger
  • グリーン → .bttn-success
  • パープル → .bttn-royal

その他の指定

上記のデザインやカラー指定の他、サイズ指定・ブロック指定(Full width)・アウトラインの有無といったことも指定可能で、サイズはxs・sm・md・lgの4つが用意されています。

ちなみに、GitHubではそれぞれのスタイル毎のCSSがあるので、一部だけで良いという人はそれらを利用すれば無駄にスタイルを読む必要がなくなります。
また、全体的に自分好みに書き換えたいなという場合は、同じくGitHubの方でStylusファイルがあるのでそちらを利用できると思います。

表示確認用のデモや詳細については、それぞれ以下より確認できます。

Back to Top

クラス付与でボタンデザインやホバーエフェクトを実装できるスタイルシート「bttn.css」

クラス付与でボタンデザインやホバーエフェクトを実装できるスタイルシート「bttn.css」

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。