[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons

サイト構築 -CSS

Post on:2013年6月24日

Buttonsのデモ

デモでは、リンクのテキストやbutton要素、input要素にclassを付与するだけで、さまざまなデザインのボタンが実装されています。

トレンドのFlat

上から、アイコンを添えたIcons, 縁が光ってるGlow,

上から、定番のRounded, かわいい錠剤のようなPill, 矩形のSquare

これも最近のトレンドCircle

バー状のBlock

最後はオプションで上から、サイズ変更、inputやbuttonなどのフォーム要素、ラッパー付きのボタン

Buttonsの使い方

使い方は非常に簡単です。

Step 1: 外部ファイル

Buttons.zipをButtons- GitHubからダウンロードし、外部ファイルとして記述します。

<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/button.css">

Step 2: HTML

あとは、HTMLにボタンのスタイルを使うだけで実装できます。
デモのHTMLは、こんな感じです。

<a href="#" class="button button-rounded button-flat-primary">press me</a>
<a href="#" class="button button-pill button-flat-primary">press me</a>
<a href="#" class="button button-flat-primary">press me</a>
<a href="#" class="button button-circle button-flat-primary">press me</a>

上から、Flatの角丸、ピル、ブロック、サークル、です。

ボタンのオプション

フォントファミリーの設定で日本語フォントを加えると幸せになれます。

$namespace: CSSのネームスペース（デフォルト：button）
$glow_namespace: グロウエフェクトのネームスペース（デフォルト：glow）
$glow_color: グロウ時のカラー（デフォルト：#2c9adb, light blue）
$bgcolor: ボタンの背景カラー（デフォルト：#EEE, light gray＿
$height: 高さ（デフォルト：32px）
$font-color: フォントのカラー（デフォルト：#666, gray）
$font-size: フォントのサイズ（デフォルト：14px）
$font-weight: フォントのウェイト（デフォルト：300）
$font-family: フォントファミリー（デフォルト："HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif）