色検索
シェアする
お気に入りの色

ボタン自動作成

WEBやホームページで使うボタンの素材を自動で作成できます。
色やサイズなどを設定し、ボタンの文字を入力すれば簡単にボタン素材がブラウザ上で作成でき、JPGやPNGでダウンロードすることが出来ます。作成したボタンは無料でご自由にお使い頂いて結構です。

ボタン作成画面

左のカラーピッカーで色で色を選び、ボタンのサイズ、線幅、角丸の半径などを設定しボタンテキストを入力すれば下にボタンが表示されます。「詳細設定」では文字のシャドウや内側のシャドウをつけることもできます。
Chromeなどの場合は、そのまま右クリックから「名前をつけて画像を保存」をクリックすれば画像を保存できますが、出来ない場合は「JPG作成」か「PNG作成」をクリックすれば、下にJPG画像やPNG画像が生成されるのでそちらを保存してご利用下さい。

ボタン設定
詳細設定
PNG作成
JPG作成
フォントサイズ: px
ボタン横幅: px
ボタン縦幅: px
線幅: px
角丸半径: px
グラデーション:
ボタンテキスト:
文字シャドウ:
枠線:
内側シャドウ:
影の濃さ: %
影の位置X: %
影の位置Y: %
影のぼかし: %

ボタン画像ファイル

ボタン自動作成の使い方

色選択

左のカラーピッカーからボタンの背景色を選ぶことができます。
パレットをクリックして色を選択する以外にも、RGBのカラーコードを直接入力したり、HSVを値を入力することでも指定することができます。

ボタン設定

フォントサイズや、ボタンの大きさ、線幅などを変更できます。
数値の入力はレンジ入力でバーを動かすことでも変更できます。

フォントサイズ8px~96pxの間でボタンの文字の、フォントサイズを指定することが出来ます。
ボタン横幅40px~300pxの間で、ボタンの横幅を指定することが出来ます。
ボタン縦幅30px~200pxの間で、ボタンの縦幅を指定することが出来ます。
ボタンの横幅と縦幅は、線の幅を含めて指定したサイズになります。
線幅0px~20pxの間でボタンの線の幅を指定することができます。
0pxのときは線を表示しません。
角丸半径0px~100pxの間で角丸の半径を指定することができます。
ボタンの横幅もしくは縦幅の半分以上を超えた場合は、その値になります。
グラデーション「なし」の場合は、指定された色で塗られます。
「あり」の場合は、指定された色より明るい色から指定された色までのグラデーションで塗られます。
「反転」を選ぶをグラデーションの色が反対になります。
ボタンテキストボタンに表示する文字を入力します。
文字の色は背景色によって、白もしくは黒で表示されます。また複数行の入力も可能です。
文字がボタンの横幅以上になる場合は、ボタンの横幅のサイズに横方向に縮小されます。

詳細設定

文字のシャドウや内側のシャドウなど細かい設定をつけることができます。

文字シャドウ「あり」にすると文字の下に1pxのシャドウがつきます。
シャドウの色は、文字色が白の場合は黒、黒の場合は白で表示されます。
枠線枠線の色を変えます。
「色付」の場合は指定された色を元にした色で、「黒」の場合は黒い枠線で表示されます。
「内側白線」にチェックを入れると、枠線の内側に白でさらに枠が表示されます。
内側シャドウ「あり」にすると内側に影がつきます。シャドウの設定は以下で行います。
影の濃さ影の不透明度を0%~100%で設定します。
影の位置X影の横方向の位置をボタンの位置を基準に-100%から100%で設定します。
影の位置Y影の縦方向の位置をボタンの位置を基準に-100%から100%で設定します。
影のぼかし影をどれだけぼかすかを0%から100%で設定します。

画像に変換

ボタンを保存する場合に、「JPG作成」または「PNG作成」をクリックするとそれぞれJPG画像、PNG画像が作成されるので、右クリックで保存などしてご利用ください。