ニューモーフィズム切替ボタン｜トグル・スイッチ・ホバー対応 Neumo Toggle【CSSのみ】

カテゴリー: UI/UXモーションデザイン タグ: , ,

はじめに

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の可能性を広げるパーツとして、ぜひあなたの制作物にも取り入れてみてください！

Your Attractive Heading