フラット・グラデーション・立体（3D）・アウトライン・ネオンなど、様々なデザインのボタンCSSをスライダー操作で直感的に生成できます。
ホバー・クリック時の動きもプレビューで確認しながら、コードをワンクリックでコピーできます。
このツールは …回 使われています。
Background（プレビュー背景）
Style（ボタンのデザイン）
Presets
選べるボタンデザイン6種類
Webサイトの印象を大きく左右するボタン。このツールでは、定番から個性派まで6種類のデザインスタイルを切り替えて生成できます。
🟦
フラット / グラデーション
もっとも汎用的な単色ボタンと、2色をなめらかにつなぐ華やかなボタン。CTAボタンやフォームの送信ボタンなど、あらゆる場面で使えます。
もっとも汎用的な単色ボタンと、2色をなめらかにつなぐ華やかなボタン。CTAボタンやフォームの送信ボタンなど、あらゆる場面で使えます。
🕹
立体（3D）
クリックすると押し込まれる、物理ボタンのようなインタラクション。
クリックすると押し込まれる、物理ボタンのようなインタラクション。
box-shadow と :active の組み合わせで実現しています。仕組みは 立体的なボタンの実装解説ページ で詳しく紹介しています。
✨
アウトライン / ネオン / フローティング
枠線だけのすっきりしたボタン、暗い背景で光るネオン風ボタン、色付きの影でふわっと浮かぶボタン。サイトの世界観に合わせて選べます。
枠線だけのすっきりしたボタン、暗い背景で光るネオン風ボタン、色付きの影でふわっと浮かぶボタン。サイトの世界観に合わせて選べます。
使い方
- 「Style」から作りたいボタンのデザインを選びます。迷ったら「Presets」から近いイメージを選ぶのが早いです。
- 「Color」でメインカラーを決めます。グラデーションの場合は「Color 2」で2色目も設定します。
- スライダーで文字サイズ・余白・角丸・影の強さを微調整します。角丸を最大にするとカプセル型（ピル型）になります。
- プレビューのボタンに実際にマウスを乗せたりクリックしたりして、ホバー・押し込みの動きを確認します。
- 仕上がったら「Copy」ボタンでコードをコピーし、自分のサイトに貼り付けます。
CSSコードの使い方
コピーしたCSSは .my-button クラスとして出力されます。ボタンにしたい要素にクラスを付けて使用します。
例：buttonタグ・aタグに適用する場合
<button class="my-button">送信する</button> <a href="/contact/" class="my-button">お問い合わせ</a>
※ a タグに使う場合は、下線を消すために text-decoration: none; を追加してください。
※ クラス名 .my-button は自由に変更できます。サイト内で他のクラス名と重複しない名前にしてください。
※ コピーしたコードは HTML・CSS・JSコードプレビューツール で動作確認できます。
きれいに見せるコツ
📐
余白は「縦1：横2」が目安
Padding Y に対して Padding X を2倍以上にすると、バランスの良いボタンになります。文字が窮屈に見えるときは余白を増やしてみてください。
Padding Y に対して Padding X を2倍以上にすると、バランスの良いボタンになります。文字が窮屈に見えるときは余白を増やしてみてください。
🎨
文字と背景のコントラストを確保
淡い背景色に白文字を載せると読みにくくなります。読みやすさが不安なときは配色コントラストチェッカーで確認するのがおすすめです。
淡い背景色に白文字を載せると読みにくくなります。読みやすさが不安なときは配色コントラストチェッカーで確認するのがおすすめです。
👆
ホバー・クリックの反応が「押せる感」を作る
色の変化や押し込みの動きがあると、ユーザーは「ここは押せる」と直感的にわかります。動きのないボタンよりクリック率が上がりやすくなります。
色の変化や押し込みの動きがあると、ユーザーは「ここは押せる」と直感的にわかります。動きのないボタンよりクリック率が上がりやすくなります。
ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。