.switch { position: relative; display: block; vertical-align: top; width: 31px; height: 17px; margin: 1px 0px 0px 0; border-radius: 18px; cursor: pointer; } .switch-input { position: absolute; top: 0; left: 0; opacity: 0; margin: 0; } .switch-label { position: relative; display: block; height: inherit; font-size: 10px; text-transform: uppercase; background: #eceeef; border-radius: inherit; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); } .switch-label:after { position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit; } .switch-label:after { left: 15px; color: #FFFFFF; opacity: 0; } .switch-input:checked ~ .switch-label { background: #009edf; } .switch-input:checked ~ .switch-label:after { opacity: 1; } .switch-handle { position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; background: #fff; border-radius: 100%; } .switch-input:checked ~.switch-handle { left: 15px; box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); } .switch-label, .switch-handle { transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; }