<label class="toggle-control">
  <input type="checkbox" checked="checked">
  <span class="control"></span>
/* Follow me for more pens like this! */

  Note: This demo could have easily been written in vanilla CSS.
  The reason I opted into using SCSS, was just so that I could
  enable easy customization for you, the viewer.

  If you want to use this control in your own project as vanilla CSS;
  customize the variables to whatever you'd like, and then click on the
  down arrow button in the top right of this CSS editor and then select
  "View Compiled CSS".

// Tweak these to change the style of the toggle
$toggle-background-color-on: dodgerblue;
$toggle-background-color-off: darkgray;
$toggle-control-color: white;
$toggle-width: 100px;
$toggle-height: 50px;
$toggle-gutter: 5px;
$toggle-radius: 50%;
$toggle-control-speed: .15s;
$toggle-control-ease: ease-in;

// These are our computed variables
// change at your own risk.
$toggle-radius: $toggle-height / 2;
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);

.toggle-control {
  display: block;
  position: relative;
  padding-left: $toggle-width;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;

  input:checked ~ .control {
    background-color: $toggle-background-color-on;
    &:after {
      left: $toggle-width - $toggle-control-size - $toggle-gutter;

  .control {
    position: absolute;
    top: 0;
    left: 0;
    height: $toggle-height;
    width: $toggle-width;
    border-radius: $toggle-radius;
    background-color: $toggle-background-color-off;
    transition: background-color $toggle-control-speed $toggle-control-ease;

    &:after {
      content: "";
      position: absolute;
      left: $toggle-gutter;
      top: $toggle-gutter;
      width: $toggle-control-size;
      height: $toggle-control-size;
      border-radius: $toggle-radius;
      background: $toggle-control-color;
      transition: left $toggle-control-speed $toggle-control-ease;

/* Center the control */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #222229;
  color: white;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/garetmckinley/pen/rPKgEX.js