はじめに
CSSだけで表現力の高いUIを作れるようになりたい──そんな方におすすめなのが、今回ご紹介するNeumorphism（ニューモーフィズム）スタイルのトグルボタンです。
本記事では、クリックで切り替えるタイプ、マウスホバーで変化するタイプ、黒線を活用したアクセント付きトグルなど、合計14種類のボタンスタイルを紹介します。デザイン性だけでなく、実装もシンプルなため、CSSの練習やポートフォリオ用パーツとしても最適です。
トグルボタンのバリエーション一覧
| 番号 | タイプ | 特徴 |
|---|---|---|
| 1 | クリック | 基本スライド |
| 2 | クリック | 色変化 |
| 3 | クリック | アイコン変化 |
| 4 | クリック | 回転アニメーション |
| 5 | クリック | ON/OFF文字切り替え |
| 6 | クリック | 背景カラー変化 |
| 7〜12 | ホバー | 上記のホバー版 |
| 13 | クリック | 黒線クリック |
| 14 | ホバー | 黒線ホバー |
どのボタンも、ベースには .neumo クラスを使用し、CSSの ::after 擬似要素を活用することで滑らかなスライドや見た目の変化を表現しています。
実装のポイント解説
▷ 擬似要素 ::after を使ったスライダー
ボタン内の丸いスライダーは ::after で表現。位置を left で操作することで右へスライドするように見せています。
.neumo::after {
content: "";
position: absolute;
top: 3px;
left: 3px; /* ← 初期位置 */
width: 24px;
height: 24px;
border-radius: 50%;
transition: all 0.3s;
}
#toggle1:checked + .neumo::after {
left: 53px; /* ← 移動後 */
}▷ content プロパティで文字やアイコンを切り替え
ON/OFFやアイコン表示は ::after の content を使うことで実現。以下のように状態で切り替えます：
#toggle5:checked + .neumo::after {
content: "ON";
background: #55be20;
}
#toggle5 + .neumo::after {
content: "OFF";
background: #ccc;
}▷ Neumorphism の立体感は box-shadow が鍵
ニューモーフィズムらしい立体感は、内側と外側の box-shadow をうまく組み合わせることで演出できます。
.neumo {
background: #e0e0e0;
box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
}コード全体（HTML＋CSS）
こちらの記事で紹介しているコードの全体は以下から確認できます：
See the Pen toggle switch by masakazuimai (@masakazuimai) on CodePen.
カスタマイズ例・活用シーン
このトグルは、以下のような用途でも活躍します：
- サイトの設定メニュー切り替え
- ダークモードのON/OFF
- フォームのオプション選択切り替え
- LPやキャンペーンサイトの装飾用ボタン
カラーや影の調整をするだけで、より自分好みのデザインにもアレンジ可能です。
まとめ
- Neumorphismスタイルのトグルボタンを14種類紹介
- クリック／ホバー切替をCSSのみで実現
::afterやbox-shadowを活用した表現力を体験
CSSの可能性を広げるパーツとして、ぜひあなたの制作物にも取り入れてみてください！