フラットデザインに合うボタンを手軽に作れるサイト「2.5dBUTTON」!

2015/10/07

こんにちは。
今回はフラットデザインに合うボタンを手軽に作れるサイト「2.5dBUTTON」!です。

フラットデザインに合うボタンを手軽に作れるサイトを見つけたので紹介したいと思います。

フラットデザインに合うボタンを手軽に作れるサイト「2.5dBUTTON」!

2.5dBUTTON

2-5dbutton

http://noht.co.jp/2_5dbutton

 

「2.5dBUTTON」の使い方

2-5dbutton2

まずは「2.5dBUTTON」のサイトにアクセスします。
スクロールしていくと上記のようなジェネレーターがありますので、これでフラットデザインに合うボタンを作ります。

「BUTTON LABEL」でボタンのテキストを入力し、「LABEL SIZE」でテキストのサイズを指定します。
「ICON」でアイコンを指定します。アイコンが不要の時は「none」を選択します。
「ICON SIZE」でアイコンのサイズを指定します。
「POPUP DIST.」でマウスオーバーした時のボタンの下にある影部分のサイズを指定します。
「HORIZONTAL PADDING」で横のpaddingを、「VERTICAL PADDING」で縦のpaddingを指定します。
「RADIUS」でボタンの角丸を指定します。
「SPEED」でマウスオーバーまでのスピードを指定します。
「BUTTON COLOR」で色を指定します。
「SIDE DARKNESS」でマウスオーバーした時のボタンの下にある影部分の色の濃さを指定します。

 

2-5dbutton3

ボタンができたら、HTMLとCSSをコピーして使っちゃいましょう!
ダウンロードもできるみたいですね。

 

いかがでしたか。フラットデザインのサイトを作る時に活用してみてはどうでしょうか。
以上でフラットデザインに合うボタンを手軽に作れるサイト「2.5dBUTTON」!でした。

topへ戻る