CSSボタンデザインギャラリー

Webサイトで使えるCSSボタンを一覧から選んで、そのままコピーできます。
色や角丸、影、文字を調整して、自分好みのボタンにできます。

作成したCSSはブラウザ上でプレビュー・コピーできます。
入力内容がサーバーに送信・保存されることはありません。

ボタン一覧

雰囲気をタブで切り替えて、使いたいボタンを選べます。

ボタン設定

文字、色、角丸、余白、影を変えると、右のプレビューとCSSにすぐ反映されます。

使う前のチェック

  • ボタンの文字や色はブラウザ内だけで反映され、サーバーに送信・保存されません。
  • 余白の padding は em 単位で出力します。文字サイズを変えても、ボタン全体のバランスを保ちやすくなります。
  • このページの見本ボタンは、Helvetica Neue、Arial、Hiragino Kaku Gothic ProN、Hiragino Sans、Noto Sans JP、sans-serif の順で表示しています。コピーしたCSSにはフォント指定を含めていません。
  • ボタン色が薄い場合は、文字色とのコントラストを確認してから使ってください。
  • 矢印を付ける場合は、Google Fonts の Material Symbols Rounded を使用します。生成CSSには読み込み用の @import も含まれます。
  • コピーしたCSSは、必要に応じてクラス名を変更して使えます。

CSSボタンデザインの作り方

ボタンは「押せる感」が大事

CSSボタンは、色、角丸、余白、影、ホバー時の変化で印象が大きく変わります。シンプルなボタンでも、余白を広めに取り、文字を読みやすくすると使いやすくなります。

自然に見せるコツ

  • 目立たせたいボタンだけ強い色を使う
  • 高級感を出したいときは彩度を少し落とす
  • 影は強くしすぎず、薄めから調整する
  • スマホでも押しやすい高さを確保する

便利なツール一覧

QRコードメーカー URLやテキストから、PNG・SVG・JPG・WebP形式のQRコードを作成できます。 このツールを開く JPG・PNG→WebP変換＆リサイズツール JPG・PNG画像をWebP形式に変換し、必要に応じて画像サイズも変更できます。 このツールを開く PNG圧縮＆リサイズツール PNG画像をブラウザ内で圧縮し、画像サイズもまとめて調整できます。 このツールを開く JPG圧縮＆リサイズツール JPG画像をブラウザ内で圧縮し、画質や画像サイズを調整できます。 このツールを開く PNG→JPG変換＆リサイズツール PNG画像をJPGに変換し、画質や画像サイズもまとめて調整できます。 このツールを開く 画像リサイズツール JPG・PNG・WebP画像の横幅や縦幅をブラウザ内で変更できます。 このツールを開く 画像結合ツール 複数の画像を縦・横・グリッドで1枚にまとめられます。 このツールを開く 画像メタデータチェッカー 画像に含まれるEXIF、XMP、GPS情報などのメタデータをブラウザ内で確認できます。 このツールを開く PDFちょい編集ツール PDFの結合、分割、ページ整理、画像からPDF作成をブラウザ内で行えます。 このツールを開く ファイル名一括変更ツール 複数ファイルの名前を連番、追加、削除、置換などで変更し、ZIPや個別ファイルで保存できます。 このツールを開く AI画像情報チェッカー PNGやJPG画像に含まれるAI生成情報やメタデータをブラウザ内で確認できます。 このツールを開く 文字数カウントツール 文章の文字数、行数、バイト数などをブラウザ内で確認できます。 このツールを開く 英単語カウントツール 英文の単語数、文字数、文の数、読了時間などを確認できます。 このツールを開く X文字数カウントツール X投稿前に文字数と投稿プレビューをブラウザ内で確認できます。 このツールを開く box-shadowジェネレーター CSSのbox-shadowをサンプルから選び、数値を調整してコピーできます。 このツールを開く CSSグラデーションギャラリー CSSグラデーションを一覧から選び、色や角度を調整してコピーできます。 このツールを開く CSSボタンデザインギャラリー 表示中 CSSボタンのデザインを一覧から選び、文字や色を調整してコピーできます。 このページを表示中 ランダムパスワード生成ツール 長さや文字種を選んで、安全性の高いランダムパスワードをブラウザ内で生成できます。 このツールを開く

このツールは、AI（ChatGPTとCodex）と人間（運営者のねこポン）の共同作業で制作しました。