Toggle Switch

In this example below you will see how to do a Toggle Switch with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by natchiketa, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright natchiketa ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Toggle Switch</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>
  <span>Heading</span>
  <label class="switch">
    <input type="checkbox"/>
    <span class="switch__slider"></span>  
  </label> 
  </h1>
    
<p>
  <span>Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody.</span>
  <label class="switch">
    <input type="checkbox"/>
    <span class="switch__slider"></span>  
  </label> 
  <span>A lot of things can change in twelve years, Admiral. Your head is not an artifact!</span>
</p>

<div style="font-size: 21px;">
  <label class="switch switch--option-row">
    <span>Label containing checkbox input</span>
    <input type="checkbox"/>
    <span class="switch__slider"></span>  
  </label> 
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/natchiketa/toggle-switch-AauiB */
body {
  font-size: 4rem;
}
body * {
  box-sizing: border-box;
}

.switch {
  position: relative;
  font-size: 1em;
  width: 1.666em;
  display: inline-block;
  height: 1em;
}
.switch .switch__slider {
  width: 1.666em;
  height: 1em;
  display: inline-block;
  border-radius: 0.5em;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  z-index: 1;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
}
.switch .switch__slider:before, .switch .switch__slider:after {
  position: absolute;
  content: '';
  -webkit-transition-property: left, right, border-color, -webkit-transform;
  -webkit-transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
}
.switch .switch__slider:before {
  width: 200%;
  height: 110%;
  background-image: linear-gradient(to right, #aaaaaa 0%, #aaaaaa 50%, #5ead79 50%, #5ead79 100%);
  z-index: 1;
  left: 0em;
}
.switch .switch__slider:after {
  background-color: #FFFFFF;
  right: 0;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  z-index: 2;
  box-sizing: border-box;
  border-width: 0.1em;
  border-style: solid;
  border-color: #AAAAAA;
}
.switch input {
  opacity: 0;
  width: 0;
  margin: 0;
  position: absolute;
}
.switch input:checked + .switch__slider:before {
  left: -100%;
}
.switch input:checked + .switch__slider:after {
  right: 100%;
  -webkit-transform: translate(100%, -50%);
  border-color: #5EAD79;
}

.switch--option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2rem;
  background-color: lightgray;
}
.switch--option-row .switch__slider {
  position: relative;
  top: auto;
  -webkit-transform: translate3d(0, 0, 0);
}

Comments