toggle buttons

by Trina Lu

HTML

<div class="switch">
  <input type="checkbox">
  <span class="label-wrap"></span>
  <span class="label-btn"></span>
</div>
<div class="switch switch-outline">
  <input type="checkbox">
  <span class="label-wrap"></span>
  <span class="label-btn"></span>
</div>

CSS

.switch {
  width: 80px;
  height: 30px;
  border-radius: 18px;
  cursor: pointer;
  -webkit-box-shadow: inset 0px 0px 2px 2px rgba(107, 107, 107, 0.9);
  -moz-box-shadow: inset 0px 0px 2px 2px rgba(107, 107, 107, 0.9);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  overflow: hidden;
  font-family: sans-serif;
  font-size: 10px;
  background: #eee;
  display: inline-block;
}

.switch input {
  height: 100%;
  width: 100%;
  z-index: 100;
  opacity: 0;
  position: absolute;
  cursor: pointer;
}

.label-wrap {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
  top: 0;
  left: -100%;
  border-radius: 18px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.label-wrap:before,
.label-wrap:after {
  width: 100%;
  height: 100%;
  position: absolute;
  text-indent: 10px;
  line-height: 30px;
}

.label-wrap:before {
  content: 'ON';
  background: #FF7F50;
  border-radius: 18px;
  color: #FFF;
}

.label-wrap:after {
  content: 'OFF';
  text-align: right;
  left: 100%;
  direction: rtl;
}

.label-btn {
  height: 22px;
  width: 22px;
  background: #FFF;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.2);
}

.label-wrap,
.label-btn {
  transition: all 0.5s ease;
}

.switch input:checked ~ .label-wrap {
  left: 0px;
}

.switch input:checked ~ .label-btn {
  left: 54px;
}


/*---switch outline---- */

.switch-outline {
  box-shadow: none;
  background: transparent;
  color: #bdc3c7;
  overflow: visible;
}

.switch-outline .label-btn {
  background: transparent;
  box-shadow: 0 0 0 1px #bdc3c7;
  top: 5px;
  left: 5px;
}

.switch-outline .label-wrap {
  width: auto;
  left: initial;
  box-shadow: none;
}

.switch-outline .label-wrap:before,
.switch-outline .label-wrap:after {
  border-radius: 18px;
  transition: all 0.5s ease;
  border: 1px...