Pure CSS toggle button switch with gray gradient

By | November 1, 2018

Flat out awesome Toggle button switch developed using pure css and html. Demo and download available.

Demo Download

Author Hugo Giraudel
Created AUGUST 01, 2012
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

 <input type="checkbox" id="switch" name="switch">
  <label for="switch" class="switch"></label>

CSS Code

*, *:after, *:before {
  box-sizing: border-box;
}

#switch {
  visibility: hidden;
  clip: rect(0 0 0 0);
  position: absolute;
  left: 9999px;
}

.switch {
  display: block;
  width: 130px;
  height: 60px;
  margin: 70px auto;
  position: relative;
  background: #ced8da;
  
}

#switch:checked ~ .switch:after {
  background: #b1ffff;
  box-shadow: inset 0 -1px 8px rgba(0, 0, 0, 0.7), inset 0 -2px 2px rgba(0, 0, 0, 0.2), 0 1px 0 white, 0 -1px 0 rgba(0, 0, 0, 0.5), -110px 32px 15px 13px rgba(0, 0, 0, 0.25);
}

Preview

Pure CSS toggle button switch with gray gradient 1