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

フラットをはじめ、定番の角丸、サークル、アイコン添えなど、さまざまなデザインのボタンを簡単に実装できるSass/Compassで作られたボタンライブラリを紹介します。

サイトのキャプチャ

Buttons
Buttons- GitHub

Buttonsのデモ

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

サイトのキャプチャ

トレンドのFlat

サイトのキャプチャ

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

サイトのキャプチャ

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

サイトのキャプチャ

これも最近のトレンドCircle

サイトのキャプチャ

バー状のBlock

サイトのキャプチャ

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

Buttonsの使い方

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

Step 1: 外部ファイル

Buttons.zipButtons- 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)

top of page

©2017 coliss