ボタンは「押せる感」が大事
CSSボタンは、色、角丸、余白、影、ホバー時の変化で印象が大きく変わります。シンプルなボタンでも、余白を広めに取り、文字を読みやすくすると使いやすくなります。
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ボタンデザインの作り方
自然に見せるコツ
- 目立たせたいボタンだけ強い色を使う
- 高級感を出したいときは彩度を少し落とす
- 影は強くしすぎず、薄めから調整する
- スマホでも押しやすい高さを確保する
便利な無料ツール一覧
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）と人間（運営者のねこポン）の共同作業で制作しました。
