スマートフォンもOSも、今やダークモードが当たり前になってきました。夜間や暗い場所でも目に優しい、あの深暗い画面です。問題は、自分のサイトのボタンがダークモードで「なんか見にくい」「背景と同化している」という状態になっていないか。そこでCSS変数と prefers-color-scheme メディアクエリを組み合わせれば、OS設定に連動してボタンが自動でモードを切り替えるようになります。JavaScriptもクラスの切り替えも不要。CSSだけで両対応が完結します。
この記事では、ダークモード対応のCSSボタンを5パターン紹介します。単純な色の反転から、ライト/ダークでスタイル自体を変えるドラマチックな切り替え、高コントラストモードまで対応したアクセシビリティ仕様まで、バリエーションを揃えました。WordPressやSWELLにもコピペで使えます。OS設定を切り替えながら確認してみてください。
Auto Invert（オート・インバート）
最もシンプルなダークモード対応の基本形。ライトモードでは濃紺の塗りボタン、ダークモードでは明るいグレー背景＋黒テキストに自動切り替えします。prefers-color-scheme: dark の中でCSS変数を上書きするだけの実装で、仕組みが直感的に理解しやすく、既存のボタンにダークモード対応を後から追加する際のテンプレートとして使いやすい一本です。
「とにかく両モードで読めるボタンにしたい」という場合の出発点として最適です。コーポレートサイト・問い合わせページ・フォームのCTAなど、シンプルに機能することが優先される場面で活躍します。ホバー時の translateY(-2px) による微浮上は、ライト・ダーク両環境で同じ動きをするよう設計しています。
See the Pen Auto Invert by BaseKENT (@basekent) on CodePen.
調整方法
- ライトモードの背景色:
.btnのbackground: #1a1a2eをブランドカラーに変更してください。ダークモード側は別途@media (prefers-color-scheme: dark)内のbackgroundを変更します - ダークモードの切り替え色:
@media (prefers-color-scheme: dark)内のbackground: #e8e8e8とcolor: #1a1a1aをセットで変更することで、明暗のコントラストを保てます - 角丸:
border-radius: 8pxを50pxにするとピル型になります。ライト・ダーク両方に効きます
Neon Night（ネオン・ナイト）
ライトモードとダークモードで「体験の質」が変わるボタン。ライトモードでは発光なしのシンプルなフラットグリーンボタンですが、ダークモードに切り替わると同じボタンが box-shadow の多重指定でネオン発光します。暗い背景の中でだけ光が際立つ——その性質を使った、理にかなった演出です。
「ダークモードの黒い背景にボタンを置きたいが、フラットだと映えない」という場面にぴったりです。ポートフォリオ・ゲーム系LP・音楽系サイトなど、ダーク背景がメインのデザインでCTAをはっきり見せたい用途に向いています。box-shadow の rgba 値を調整することで光の広がり具合を細かくコントロールできます。
See the Pen Neon Night by BaseKENT (@basekent) on CodePen.
調整方法
- 発光色の変更:
box-shadow内の#00b894とrgba(0, 184, 148, 0.5)を同じ色の別透明度に統一してください。例えば青発光なら#3a86ffとrgba(58, 134, 255, 0.5)のように変えます - 発光の強度:
rgba(0, 184, 148, 0.5)の数値（0.0〜1.0）を大きくするほど光が強くなります。0.7以上にするとかなり強烈な印象になります - ライトモードの色:
prefers-color-scheme: darkの外側の.btn { background: #00b894 }をブランドカラーに変更するだけで、ダークモード側も同じ色で発光します
Ghost Dark（ゴースト・ダーク）
ライトモードでは青い塗りボタン、ダークモードではアウトラインのみのゴーストボタンに変身します。スタイルの種類ごと切り替わるため、どちらのモードで見ても「このデザインが正しい形」と感じる一本です。transition: background 0.3s, color 0.3s が入っているため、テスト環境でOSのダークモードをオンオフすると切り替わりがなめらかに見えます。
ダークモードでゴースト化する理由は「背景と塗りの区別がつきにくくなる」という暗い背景特有の問題への対策です。塗りをなくしてボーダーのみにすることで、コントラスト不足を防げます。ビジネス系・SaaS系・テック系サイトのように、ライト・ダーク両方に対応したプロっぽい仕上がりが必要なサイトで使いやすい設計です。
See the Pen Ghost Dark by BaseKENT (@basekent) on CodePen.
調整方法
- ライトモードの塗り色:
.btn { background: #3a86ff }とborder-colorを同じ色にすることで、どんな色のブランドカラーにも対応できます - ダークモードのホバー背景:
rgba(58, 134, 255, 0.1)の0.1を大きくするとホバー時の背景が濃くなります。0.15〜0.2あたりが視認しやすい範囲です - 角丸:
border-radius: 8pxを4pxにするとシャープな印象に、50pxにするとピル型ゴーストボタンになります
Warm Shift（ウォーム・シフト）
ライトモードでは「クールなインディゴブルー系」、ダークモードでは「温かみのあるアンバー系」に自動でシフトします。色温度がモードに連動して変わるので、視覚的に「環境に合わせて最適化されている」という印象を自然に与えます。transition: background 0.4s ease により、OS設定の切り替え時に色が滑らかに移行するのも特徴です。
ライトの寒色系とダークの暖色系の組み合わせは、目への刺激が少なく長時間使いやすい配色です。テキストが多いメディアサイト・ブログ・ライティングツールなど、読者が長時間過ごすページのCTAに特に向いています。ピル型（border-radius: 50px）との相性も良く、現代的なSaaS風のUIに自然に溶け込みます。
See the Pen Warm Shift by BaseKENT (@basekent) on CodePen.
調整方法
- ライトモードの配色:
background: linear-gradient(135deg, #4f46e5, #3b82f6)のカラーストップを変更します。2色の組み合わせで異なる印象になります - ダークモードの配色:
@media (prefers-color-scheme: dark)内のbackground: linear-gradient(135deg, #d97706, #f59e0b)で暖色系の色を変更できます。ダークモードでは暗い背景に映える「明るめ・暖かめ」の色を選ぶのがコツです - グラデーションの角度:
135degを90degにすると縦方向のグラデーション、0degにすると横方向になります
Contrast Boost（コントラスト・ブースト）
prefers-color-scheme に加えて prefers-contrast: more メディアクエリも組み合わせた、アクセシビリティ特化ボタン。通常のライト/ダーク切り替えに加え、OSで「コントラストを上げる」設定をしているユーザーに対しては、背景と文字が黒/白のみの高コントラスト仕様に自動で切り替わります。
アクセシビリティが求められるサービス——行政系・医療系・教育プラットフォーム——では、視覚障害や高齢ユーザーへの対応が今後ますます重要になります。prefers-contrast: more に対応したCSSを書いておくことで、追加のJavaScriptなしにその需要に応えられます。他の4デモとは設計の軸が少し異なりますが、「ダークモード対応」の文脈で一緒に覚えておくと実務で役立つ技術です。
See the Pen Contrast Boost by BaseKENT (@basekent) on CodePen.
調整方法
- 標準時のボタン色:
.btn { background: #6b7280 }を変更することで、高コントラストモードが有効でない通常状態のボタン色を調整できます - 高コントラスト時の色:
@media (prefers-contrast: more)内のbackground: #000000とcolor: #ffffffは意図的に黒/白固定にしています。ここを変えると高コントラストの意味が薄れるので変更は非推奨です - ボーダーの太さ:
border: 3px solid #000000の3pxを大きくするとさらに視認性が上がります。アクセシビリティガイドライン（WCAG）では3px以上が推奨されています
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
