Gutenberg、だいぶ使いやすくなったので移行中です

CSSボタンが簡単に作れる!「CSS Button Creator」

CSSButtonCreator WEB

最近はCSSだけで綺麗なボタンを作れるようになりましたよね。
こんなかんじのやつ。

押したくなるボタン

でも、グラデーションやシャドウを使ったボタンってCSSで書くのが面倒なときないですか?

わたしはあります。

ホバーの指定もあると余計にめんどい。

そんなめんどくさがりのわたしが使っている、コピペで簡単に使えるボタンジェネレータをご紹介します!

 

CSS Button Creator

cssbtn

CSS Button Creator

「CSS Button Creator」です。
設定できる項目が多く、英語なのではじめはちょっと使いにくいと思うかもですが、ポイントを押さえれば簡単に使うことができます!

 

CSS Button Creatorの使い方

CSS Button Creatorの画面の見方

cssbtn

左上がプレビュー。並んでいる色のボタンでプレビューの背景の色を変更することができます。
プレビューの下がコピペ用のHTMLコードとCSSコードです。

右側に設定用の項目が並んでいます。

 

The Basics

基本設定項目です。

cssbtn
TEXT:プレビューのボタンに表示されるテキスト。
CSS Class Name:クラス名を付けておくことができます。
The Font:フォントを選ぶことができます。
Text Color:ボタンのフォントの色。
Button Size Type:ボタンサイズ。「Custom Dimensions」にすると数値で設定することができます。
Font Size:ボタンのフォントのサイズ。
Font Weight:ボタンのフォントの太さ。
Padding:ボタンのパディング。

 

Text Shadow

ボタンのテキストシャドウに関する項目です。
影の位置やぼかしはスライダーで設定できるので、左のプレビューを見ながら設定していきましょう。

cssbtn
Enable Text Shadow?:テキストシャドウを有効にするか。
Text Shadow Color:テキストシャドウの色。
Horizontal:影の位置。横。
Vertical:影の位置。縦。
Blur:ぼかし。

 

Text Shadow

ボタンのシャドウに関する項目です。
こちらも影の位置やぼかしはスライダーで設定できるので、左のプレビューを見ながら設定していきましょう。

cssbtn
Enable Box Shadow?:シャドウを有効にするか。
Shadow Type:シャドウタイプ。シャドウを外側に付けるか、内側に付けるか。
Box Shadow Color:シャドウの色。
Horizontal:影の位置。横。
Vertical:影の位置。縦。
Blur:ぼかし。
Spread :影の大きさ。

 

Border Settings

ボタンのボーダーに関する項目です。

cssbtn
Enable Border?:ボーダーを有効にするか。
Border Type:ボーダータイプ。
Border Color:ボーダーの色。
Border Width:ボーダーの太さ。
Border Radius:角の丸み。

 

Background

ボタンの色に関する項目です。

cssbtn
Background Type:背景をグラデーションにするか、1色にするか
Gradient Start:グラデーションの場合の開始色
Gradient End:グラデーションの場合の終了色

 

Hover

ボタンのホバー(押した時の色)。

cssbtn
Enable Hover?:ホバーを有効にするか。
Hover Background Type:背景をグラデーションにするか、1色にするか
Gradient Start:グラデーションの場合の開始色
Gradient End:グラデーションの場合の終了色

 

設定ができたらコードをコピペ!

プレビュー下のHTMLコードとCSSをコピペします。
ボタンのAタグの間に文字を入れれば…

完成!!

 

コメント

タイトルとURLをコピーしました