Nume: On/Off button
Autor: mr.franta
Disponibilitate: Orice platforma.
Resurse: HTML/CSS
Demo si download
https://i.servimg.com/u/f36/19/55/42/16/onoff10.png

HTML

Cod:

<div class="on"><b>ON</b><span></span></div>
<div class="off"><b>OFF</b><span></span></div>

CSS

Cod:

.on, .off{
 display: inline-block;
 height: 50px;
 border-radius: 20px;
 margin: 5px;
 position: relative;
 display: flex;
 width: 100px;
 font-family: bahnschrift;
 font-weight: 800;
 font-size: 20px;
 padding-left: 20px;
   color: #ddd;
}
.on span, .off span{
 width: 32px;
 height: 32px;
position: relative;
   top: 5px;
 border-radius: 50%;
 background: linear-gradient(to bottom, #bbb, #eee);
 border: 4px solid #fff;
 box-shadow: 0px 3px 3px #666;
}
.on span{
 left: 28px;
}
.off span{
 right: 50px;
}
.on b, .off b{
 position: relative;
 top: 14px;
}

.off b{
 left: 50px;
}
.on{
 background: #49c955;
 box-shadow: 0px 3px 2px #29802f inset;
 text-shadow: 0px 1px 1px #29802f;
}
.off{
 text-align: right;
  background: #bf2c45;
 box-shadow: 0px 3px 2px #691321 inset;
 text-shadow: 0px 1px 1px #691321;
}