最近はCSSだけで綺麗なボタンを作れるようになりましたよね。
こんなかんじのやつ。
でも、グラデーションやシャドウを使ったボタンってCSSで書くのが面倒なときないですか?
わたしはあります。
ホバーの指定もあると余計にめんどい。
そんなめんどくさがりのわたしが使っている、コピペで簡単に使えるボタンジェネレータをご紹介します!
CSS Button Creator
「CSS Button Creator」です。
設定できる項目が多く、英語なのではじめはちょっと使いにくいと思うかもですが、ポイントを押さえれば簡単に使うことができます!
CSS Button Creatorの使い方
CSS Button Creatorの画面の見方
左上がプレビュー。並んでいる色のボタンでプレビューの背景の色を変更することができます。
プレビューの下がコピペ用のHTMLコードとCSSコードです。
右側に設定用の項目が並んでいます。
The Basics
基本設定項目です。
TEXT:プレビューのボタンに表示されるテキスト。
CSS Class Name:クラス名を付けておくことができます。
The Font:フォントを選ぶことができます。
Text Color:ボタンのフォントの色。
Button Size Type:ボタンサイズ。「Custom Dimensions」にすると数値で設定することができます。
Font Size:ボタンのフォントのサイズ。
Font Weight:ボタンのフォントの太さ。
Padding:ボタンのパディング。
Text Shadow
ボタンのテキストシャドウに関する項目です。
影の位置やぼかしはスライダーで設定できるので、左のプレビューを見ながら設定していきましょう。
Enable Text Shadow?:テキストシャドウを有効にするか。
Text Shadow Color:テキストシャドウの色。
Horizontal:影の位置。横。
Vertical:影の位置。縦。
Blur:ぼかし。
Text Shadow
ボタンのシャドウに関する項目です。
こちらも影の位置やぼかしはスライダーで設定できるので、左のプレビューを見ながら設定していきましょう。
Enable Box Shadow?:シャドウを有効にするか。
Shadow Type:シャドウタイプ。シャドウを外側に付けるか、内側に付けるか。
Box Shadow Color:シャドウの色。
Horizontal:影の位置。横。
Vertical:影の位置。縦。
Blur:ぼかし。
Spread :影の大きさ。
Border Settings
ボタンのボーダーに関する項目です。
Enable Border?:ボーダーを有効にするか。
Border Type:ボーダータイプ。
Border Color:ボーダーの色。
Border Width:ボーダーの太さ。
Border Radius:角の丸み。
Background
ボタンの色に関する項目です。
Background Type:背景をグラデーションにするか、1色にするか
Gradient Start:グラデーションの場合の開始色
Gradient End:グラデーションの場合の終了色
Hover
ボタンのホバー(押した時の色)。
Enable Hover?:ホバーを有効にするか。
Hover Background Type:背景をグラデーションにするか、1色にするか
Gradient Start:グラデーションの場合の開始色
Gradient End:グラデーションの場合の終了色
設定ができたらコードをコピペ!
プレビュー下のHTMLコードとCSSをコピペします。
ボタンのAタグの間に文字を入れれば…
コメント