ios toggle

by zerrax

HTML

<div class="wrapper">
  <label style="">
  <a>Hello</a>
    <input type="checkbox" name="toggle" id="toggle">
    <label for="toggle"></label>
  </label>
</div>

CSS

/* Hides the checkbox */
input#toggle {
  max-height: 0;
  max-width: 0;
  opacity: 0;
  
}

/* <label> style to look/animate like ios toggle button */
input#toggle + label {
  display: block;
  position: relative;
  box-shadow: inset 0 0 0px 1px #d5d5d5;
  text-indent: -5000px;
  height: 30px;
  width: 60px;
  border-radius: 15px;
}

input#toggle + label:before {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  border-radius: 15px;
  background: rgba(19, 191, 17, 0);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
}

input#toggle + label:after {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0px;
  border-radius: 15px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/* Switch background if checked */
input#toggle:checked + label:before {
  width: 60px;
  background: rgba(19, 191, 17, 1);
}

input#toggle:checked + label:after {
  left: 30px;
  box-shadow: inset 0 0 0 1px rgba(19, 191, 17, 1), 0 2px 4px rgba(0, 0, 0, .2);
 
}
div.wrapper > label{
  background:#2d333b;
  display: inline-flex;
  border-radius:6px;
  padding:5px;
  color:#eee;
  border:solid 1.3px rgba(0,0,0,0.8)
}
div.wrapper > label > a {
      padding: 5px;
    font-size: 19px;
}