コピペで使えるトグル スイッチ(toggle switch)のデザイン13種類

チェックボックス(Checkbox)とCSSでコピペで使えるトグル スイッチ(toggle switch)

htmlで使用するタップやクリックでON/OFFできるスイッチボタンをチェックボックスとCSSで実現するコピペで使用できるサンプル集。

角丸のトグル スイッチ（iOS風）

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch1" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch1{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/*オフの色*/
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch1:checked{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"].mam-toggle-switch1::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"].mam-toggle-switch1:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
</style>

四角のトグル スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch2" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch2{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/*オフの色*/
  border-radius:0em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch2:checked{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"].mam-toggle-switch2::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#fff;
  border-radius:0em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"].mam-toggle-switch2:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
</style>

アクチュエーターにON、OFFが表示される角丸のトグル スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch3" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch3{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/*オフの色*/
  border-radius:0.5em;
  box-shadow:0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch3:checked{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"].mam-toggle-switch3::before{
  box-sizing:border-box;
  content:"OFF";
  color:#333;
  font-size:0.4em;
  line-height:1em;
  padding:0.5em 0 0 0;
  overflow:visible;
  text-align:center;
  position:absolute;
  left:0.25em;
  top:0.25em;
  bottom:0.25em;
  width:2em;
  background:#FFF;
  border-radius:1em;
  transform:translateX(0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"].mam-toggle-switch3:checked::before{
  transform:translateX(125%);
  transition:all 0.2s ease-in-out;
  content:"ON";
  color:#2C2;
}
</style>

アクチュエーターにON、OFFが表示される四角のトグル スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch4" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch4{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/*オフの色*/
  border-radius:0em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch4:checked{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"].mam-toggle-switch4::before{
  box-sizing:border-box;
  content:"OFF";
  color:#333;
  font-size:0.4em;
  line-height:1em;
  padding:0.5em 0 0 0;
  overflow:visible;
  text-align:center;
  position:absolute;
  left:0.25em;
  top:0.25em;
  bottom:0.25em;
  width:2em;
  background:#FFF;
  border-radius:0em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"].mam-toggle-switch4:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
  content:"ON";
  color:#2C2;
}
</style>

内部にON、OFFが表示される角丸のトグル スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch5" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch5{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#333;
  background:#AAA;/*オフの色*/
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch5:checked{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"].mam-toggle-switch5::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"].mam-toggle-switch5:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
input[type="checkbox"].mam-toggle-switch5::after{
  box-sizing:border-box;
  position:absolute;
  content:"OFF";
  color:#fff;
  font-size:0.4em;
  left:0.5em;
  text-align:right;
  width:calc(100% - 1em);
  top:50%;
  transform:translate(0,-50%);
}
input[type="checkbox"].mam-toggle-switch5:checked::after{
  content:"ON";
  text-align:left;
}
</style>

内部にON、OFFが表示される四角のトグル スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch6" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch6{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#333;
  background:#AAA;/*オフの色*/
  border-radius:0em;
  box-shadow:0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch6:checked{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"].mam-toggle-switch6::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"].mam-toggle-switch6:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
input[type="checkbox"].mam-toggle-switch6::after{
  box-sizing:border-box;
  position:absolute;
  content:"OFF";
  color:#fff;
  font-size:0.4em;
  left:0.5em;
  text-align:right;
  width:calc(100% - 1em);
  top:50%;
  transform:translate(0,-50%);
}
input[type="checkbox"].mam-toggle-switch6:checked::after{
  content:"ON";
  text-align:left;
}
</style>

細い溝のトグル スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch7" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch7{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  border:none;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch7:checked{
  background-color: transparent;
}
input[type="checkbox"].mam-toggle-switch7::before{
  content:"";
  position:absolute;
  left:0.1em;
  right:0.1em;
  height:0.2em;
  background:#666;/*オフの色*/
  border-radius:0.5em;
  box-shadow:0.1em 0.1em 0.1em 0 rgba(0,0,0,0.3);
  margin:0;
  transform:translate(0,calc(0.5em - 50%));
}
input[type="checkbox"].mam-toggle-switch7:checked::before{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"].mam-toggle-switch7::after{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1em;
  background:#CCC;
  border-radius:0.5em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"].mam-toggle-switch7:checked::after{
  transform:translate(100%,0%);
  transition:all 0.2s ease-in-out;
}
</style>

電源マーク（O,I）が表示されるトグル スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch8" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch8{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#C22;/*オフの色*/
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch8:checked{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"].mam-toggle-switch8::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:transparent;
  border:#FFF 0.2em solid;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"].mam-toggle-switch8:checked::before{
  width:0.2em;
  background:#FFF;
  transform:translate(1.2em,0%);
  transition:all 0.2s ease-in-out;
}
</style>

オン、オフ時にアクチュエーターがアニメーションする角丸トグル スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch9" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch9{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/*オフの色*/
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch9:checked{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"].mam-toggle-switch9::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
  animation:mam-toggle-switch9b 0.2s linear 0.0s 1 normal both running;
}
input[type="checkbox"].mam-toggle-switch9:checked::before{
  animation:mam-toggle-switch9a 0.2s linear 0.0s 1 normal both running;
}
@keyframes mam-toggle-switch9a{
    0%{transform:translate(  0%,0%) scaleX(1);}
   50%{transform:translate( 64%,0%) scaleX(2);}
  100%{transform:translate(128%,0%) scaleX(1);}
}
@keyframes mam-toggle-switch9b{
    0%{transform:translate(128%,0%) scaleX(1);}
   50%{transform:translate( 64%,0%) scaleX(2);}
  100%{transform:translate(  0%,0%) scaleX(1);}
}
</style>

オン、オフ時にアクチュエーターがアニメーションする四角のトグル スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch10" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch10{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/*オフの色*/
  border-radius:0em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch10:checked{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"].mam-toggle-switch10::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
  animation:mam-toggle-switch10b 0.2s linear 0.0s 1 normal both running;
}
input[type="checkbox"].mam-toggle-switch10:checked::before{
  animation:mam-toggle-switch10a 0.2s linear 0.0s 1 normal both running;
}
@keyframes mam-toggle-switch10a{
    0%{transform:translate(  0%,0%) scaleX(1);}
   50%{transform:translate( 64%,0%) scaleX(2);}
  100%{transform:translate(128%,0%) scaleX(1);}
}
@keyframes mam-toggle-switch10b{
    0%{transform:translate(128%,0%) scaleX(1);}
   50%{transform:translate( 64%,0%) scaleX(2);}
  100%{transform:translate(  0%,0%) scaleX(1);}
}
</style>

ロッカー スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch11" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch11{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  margin:0.2em 2px 2px 2px;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  border-radius:0em;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch11::before{
  content:"On";
  box-sizing:border-box;
  position:absolute;
  font-size:0.4em;
  margin:0;
  width:50%;
  height:100%;
  left:0;
  top:0;
  bottom:0;
  text-align:center;
  padding:0.6em 0em;
  transform-origin:100% 100%;
  color:#fff;
  transform:skew(0deg,10deg) scaleX(90%);
  background:#444;
  box-shadow:-0.2em 0.2em 0.1em 0.1em rgba(0,0,0,0.4);
  transition:all 0.2s;
}
input[type="checkbox"].mam-toggle-switch11:checked::before{
  transform:skew(0deg,0deg);
  background:#2C2;
  box-shadow:0em 0.2em 0.1em 0.1em rgba(0,0,0,0.4);
}
input[type="checkbox"].mam-toggle-switch11::after{
  content:"Off";
  box-sizing:border-box;
  position:absolute;
  font-size:0.4em;
  margin:0;
  width:50%;
  height:100%;
  right:0;
  top:0;
  bottom:0;
  text-align:center;
  padding:0.6em 0em;
  transform-origin:0% 100%;
  color:#fff;
  transform:skew(0deg,0deg);
  background:#f22;
  box-shadow:0em 0.2em 0.1em 0.1em rgba(0,0,0,0.4);
  transition:all 0.2s;
}
input[type="checkbox"].mam-toggle-switch11:checked::after{
  transform:skew(0deg,-10deg) scaleX(90%);
  background:#444;
  box-shadow:0.2em 0.2em 0.1em 0.1em rgba(0,0,0,0.4);
}
</style>

パイロット スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch12" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch12{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  margin:0.2em 0.5em 0.2em 0.1em;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/*オフの色*/
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch12::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#fff;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"].mam-toggle-switch12:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0em 0.1em 0px rgba(34,204,34,0.3);
}
input[type="checkbox"].mam-toggle-switch12::after{
  box-sizing:border-box;
  content:"";
  position:absolute;
  width:0.3em;
  height:0.3em;
  top:0.4em;
  left:2.1em;
  border-radius:50%;
  background:#999;
  box-shadow:0 0 0 0 rgba(153,153,153,0.4),
             inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4);
}
input[type="checkbox"].mam-toggle-switch12:checked::after{
  background:#2c2;
  box-shadow:0 0 0.05em 0.05em rgba(34,204,34,0.4),
             inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4);
}
</style>

角型パイロット スイッチ

HTML・CSSソースコードを見る

<label>
  <input type="checkbox" class="mam-toggle-switch13" />
</label>

<style>
input[type="checkbox"].mam-toggle-switch13{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  margin:0.2em 0.5em 0.2em 0.1em;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/*オフの色*/
  border-radius:0.1em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].mam-toggle-switch13::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#fff;
  border-radius:0.1em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"].mam-toggle-switch13:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0em 0.1em 0px rgba(34,204,34,0.3);
}
input[type="checkbox"].mam-toggle-switch13::after{
  box-sizing:border-box;
  content:"";
  position:absolute;
  width:0.3em;
  height:0.3em;
  top:0.4em;
  left:2.1em;
  border-radius:50%;
  background:#999;
  box-shadow:0 0 0 0 rgba(153,153,153,0.4),
             inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4);
}
input[type="checkbox"].mam-toggle-switch13:checked::after{
  background:#2c2;
  box-shadow:0 0 0.05em 0.05em rgba(34,204,34,0.4),
             inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4);
}
</style>