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

WEB

2019.09.182019.09.15

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

押したくなるボタン

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

わたしはあります。

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

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

CSS Button Creator
CSS Button Creatorの使い方

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 ：影の大きさ。