Topcoat

CSS for clean and fast web apps

Switch





Examples

Show code snippets

HTML

<label class="topcoat-switch">
  <input type="checkbox" class="topcoat-switch__input">
  <div class="topcoat-switch__toggle"></div>
</label>
<br>
<br>
<label class="topcoat-switch">
  <input type="checkbox" class="topcoat-switch__input" checked>
  <div class="topcoat-switch__toggle"></div>
</label>
<br>
<br>
<label class="topcoat-switch">
  <input type="checkbox" class="topcoat-switch__input" disabled>
  <div class="topcoat-switch__toggle"></div>
</label>

CSS


.topcoat-switch {
  font-size: 12px;
  padding: 0 0.563rem;
  border-radius: 4px;
  border: 1px solid hsla(180, 1%, 20%, 1);
  overflow: hidden;
  width: 3.5rem;
}

.topcoat-switch__toggle:before,
.topcoat-switch__toggle:after {
  top: -1px;
  width: 2.6rem;
}

.topcoat-switch__toggle:before {
  content: 'ON';
  color: hsla(207, 74%, 52%, 1);
  background-color: hsla(210, 2%, 25%, 1);
  right: .8rem;
  padding-left: 0.75rem;
}

.topcoat-switch__toggle {
  line-height: 1.313rem;
  height: 1.313rem;
  width: 1rem;
  border-radius: 4px;
  color: hsla(180, 2%, 78%, 1);
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.69);
  background-color: hsla(180, 1%, 35%, 1);
  border: 1px solid hsla(180, 1%, 20%, 1);
  margin-left: -0.6rem;
  margin-bottom: -1px;
  margin-top: -1px;
  -webkit-box-shadow: inset 0 1px hsla(0, 0%, 45%, 1);
  box-shadow: inset 0 1px hsla(0, 0%, 45%, 1);
  -webkit-transition: margin-left 0.05s ease-in-out;
  transition: margin-left 0.05s ease-in-out;
}

.topcoat-switch__toggle:after {
  content: 'OFF';
  background-color: hsla(210, 2%, 25%, 1);
  left: .8rem;
  padding-left: 0.6rem;
}

.topcoat-switch__input:checked + .topcoat-switch__toggle {
  margin-left: 1.85rem;
}

.topcoat-switch__input:active + .topcoat-switch__toggle {
  border: 1px solid hsla(180, 1%, 20%, 1);
  -webkit-box-shadow: inset 0 1px hsla(0, 0%, 45%, 1);
  box-shadow: inset 0 1px hsla(0, 0%, 45%, 1);
}

.topcoat-switch__input:focus + .topcoat-switch__toggle {
  border: 1px solid hsla(227, 100%, 50%, 1);
  -webkit-box-shadow: 0 0 0 2px hsla(208, 82%, 69%, 1);
  box-shadow: 0 0 0 2px hsla(208, 82%, 69%, 1);
}

.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,
.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {
  background: transparent;
}