2017

28

Jun

HTML・CSS

ボタンデザインジェネレーターを作成しました。

時間があったので、ボタンデザインジェネレーターを作成しました。
 
ボタンを追加するとき、ちょっと大きくしたり、ちょっと影増やしたり、デザイン調整することってありますよね。
実際にできたものを見ながら確認できるツールがあったら便利だなぁって、ずっと思っていたので、
自分で、CSSデザインジェネレーターを作ってみました。

 
ボタンデザインジェネレーター
http://generator.web-alpha.info/btn/
使い方は、見ていただけるとわかるかと思いますが、簡単に説明します。

[使い方]
①STEP1で調整します。
673389c6d4e4e2ec7c4782e144420afb

[設定できる項目]
・クラス名
・テキスト内容(→ボタン名)
・大きさ(縦/横)
・線
・角丸
・ボタン背景
・ボタン影
・文字
・文字影
・hover

※一番上のスライダー部分クリックしてから、調整すると同じようなボタンが簡単にできます。

②STEP2で、表示を確認。
③STEP3に出てきているコードをコピペする!

調整するだけで、簡単に表示できるように作成しています。
html+CSSコーディングを始めたばかりの人など、ご活用いただければと思います。
もし、バグや改善点などあれば、ご報告いただけるとうれしいです。

※今後、ボタン以外のバージョンも作成したいと思っています。


タグ

同じ「HTML・CSS」カテゴリの記事
ABOUT

福岡在住、フリーランスのプログラマのメモ日記です。組込SEからWEB系に転向。子育てしながら、在宅SOHOにてお仕事しています。
ウェブサイトを作っていて困ったことや、よく調べることを書いていきます。

[対応言語]
HTML、CSS、PHP、Javascript、jQuery
Ruby On Rails、JAVA、C、C++、VB

[運営サイト]
キャラデコ弁.com
CSSデザインジェネレーター