文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > ボタンのデザイン > ON/OFFスイッチ

ON/OFFスイッチをCSSのみで実装

htmlで使用するON/OFF,Yes/NoのスイッチボタンをCSSのみで実現するサンプルと自動作成を掲載しています。スライドスイッチ、回転スイッチ、影付きスイッチなど色々なスイッチの動くサンプルも掲載しています。

CSSはそのままコピー&ペーストでご利用いただけます。

ON/OFFスイッチをCSSで作ってみよう

文字の表示有無
ON/OFFスイッチの大きさ
横幅
高さ
背景の指定
OFFの色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
ONの色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
「ON」「OFF」の値は、チェックボックスより取得できます
使用したhtml
<div id="switchArea">
  <input type="checkbox" id="switch1">
  <label for="switch1"><span></span></label>
  <div id="swImg"></div>
</div>
使用したCSS
<style type="text/css">
 
 /* === ボタンを表示するエリア ============================== */
.switchArea {
  line-height    : 60px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 27px;                /* 文字サイズ         */
  position       : relative;            /* 親要素が基点       */
  margin         : auto;                /* 中央寄せ           */
  width          : 150px;               /* ボタンの横幅       */
  background     : #fff;                /* デフォルト背景色   */
}
 
 /* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}
 
 /* === チェックボックスのラベル(標準) ==================== */
.switchArea label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 60px;                /* ボタンの高さ       */
  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  border-radius  : 30px;                /* 角丸               */
}
 
 /* === チェックボックスのラベル(ONのとき) ================ */
.switchArea input[type="checkbox"]:checked +label {
  border-color   : #78bd78;             /* 選択タブの枠線     */
}
 
 /* === 表示する文字(標準) ================================ */
.switchArea label span:after{
  content        : "OFF";               /* 表示する文字       */
  padding        : 0 0 0 36px;          /* 表示する位置       */
  color          : #999999;             /* 文字色             */
}
 
 /* === 表示する文字(ONのとき) ============================ */
.switchArea  input[type="checkbox"]:checked + label span:after{
  content        : "ON";                /* 表示する文字       */
  padding        : 0 36px 0 0;          /* 表示する位置       */
  color          : #78bd78;             /* 文字色             */
}
 
 /* === 丸部分のSTYLE(標準) =============================== */
.switchArea #swImg {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 52px;                /* 丸の横幅           */
  height         : 52px;                /* 丸の高さ           */
  background     : #999999;             /* カーソルタブの背景 */
  top            : 4px;                 /* 親要素からの位置   */
  left           : 4px;                 /* 親要素からの位置   */
  border-radius  : 26px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}
 
 /* === 丸部分のSTYLE(ONのとき) =========================== */
.switchArea input[type="checkbox"]:checked ~ #swImg {
  transform      : translateX(90px);    /* 丸も右へ移動       */
  background     : #78bd78;             /* カーソルタブの背景 */
}
</style>
ページTOP
広告
広告

色々なスイッチボタン

デザインで使用している画像は、直接リンクで使用しないでください。
電源アイコンはなどは以下よりダウンロードできます。
【フリーアイコン】 パソコン

以下のサンプルの「ON」「OFF」の値は、ラジオボタンまたはチェックボックスのchecked状態で取得することが出来ます。

グラデーションのスイッチボタン

ラジオボタン「input type="radio"」を使用し、スイッチにグラデーションを付けたサンプルです。

HTML
CSS
表示

シンプルなスライドスイッチ

チェックボックス「input type="checkbox"」を使用した、シンプルなスライドスイッチのサンプルです。

HTML
CSS
表示

シンプルな1つボタンスイッチ

チェックボックス「input type="checkbox"」を使用した、シンプルな1つボタン「ON/OFF」のスイッチのサンプルです。

HTML
CSS
表示

画像が回転しながらON/OFFを切り替えるスイッチ

ONの時は時計回り、OFFの時は反時計回りで変化するサンプルです。このサンプルもCSSのみで実現しています。

HTML
CSS
表示

画像が横回転しながらON/OFFを切り替えるスイッチ

ONの時は右回転、OFFの時は左回転しながら変化するサンプルです。このサンプルもCSSのみで実現しています。

HTML
CSS
表示

マウスオーバーで動くスイッチ

マウスオーバーで少し傾き、マウスを離すと回転してON/OFFが切り替わります。

HTML
CSS
表示

シンプルに背景が変わるスイッチ

シンプルに背景色が変わるスイッチボタンのサンプルです。

HTML
CSS
表示
ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン