2014/07/23

スライダー調整だけでボタンが作れる!「2.5dBUTTON」の使い方

スライダー調整だけでボタンが作れる!「2.5dBUTTON」の使い方

スライダーを調整するだけでフラットデザインのボタンが作成できるサイト「2.5dBUTTON」の使い方をご紹介します。
HTMLとCSSをダウンロードできるので簡単にサイトへ実装することができます。

http://noht.co.jp/2_5dbutton
まずはサイトにアクセスします。

サンプルとして上のようなボタンが表示されています。
こちらをスライダーを使ってカスタマイズしていきます。

BUTTON LABEL : ボタンに挿入するテキスト
LABEL SIZE : テキストのフォントサイズ
ICON : アイコンを選択
ICON SIZE : アイコンのサイズを選択
LABEL COLOR : アイコンとテキストの色選択
POPUP DIST. : マウスオーバーした時にボタンが浮き上がる高さ

HORIZONTAL PADDING : 横方向のpadding
VERTICAL PADDING : 縦方向のpadding
RADIUS : border-radius。角丸の指定
SPEED : ボタンが浮き上がるまでのスピード
BUTTON COLOR : ボタンの背景色
SIDE DARKNESS : 影の不透明度

全部で12項目のカスタマイズが可能です。

試しにひとつ作ってみました。
このボタンは以下のようにカスタマイズしてあります。

BUTTON COLORのカラーコード。

ボタンの作成が終わったら、下部にある「ダウンロード」ボタンを押せば、HTMLとCSSのダウンロードが開始されます。
あとはダウンロードしたコードをコピペすれば実装できます。

まとめ

シンプルなデザインでも、これだけ調整する要素があるということがわかりますね。
簡単そうにみえてコードが複雑なフラットデザインのボタンも、直感的に調整できるので簡単に作成することができます。
フラットデザインのボタンを作る際は、是非使用してみてください。