Pure CSS iOS Switch Toggle Button Using Checkbox Input

CSS3 iOS Switch Button is a pure CSS component that turns a native checkbox into an iOS-style on/off toggle.

It uses label and checkbox markup, hides the checkbox visually, and animates the track and handle with CSS transforms and transitions.

Ideal for settings panels, mobile-inspired forms, and preference controls that need a large switch button with no JavaScript dependency.

How to use it:

1. Create a checkbox input for the toggle switch.

<label class="switch">
  <input type="checkbox" checked>
  <span></span> 
</label>

2. The primary CSS/CSS3 for the switch.

label.switch {  
  text-align: left;
  width: 150px;
  height: calc(150px / 2);
  border-radius:60px;    
  background-color:#4ed164;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
label.switch > span {
  display: block;
  width: 100%;
  height: 100%;
}
label.switch > input[type="checkbox"] {
  opacity: 0;
  position: absolute;
} 
label.switch > span:before, label.switch > span:after {
  content: "";
  cursor: pointer;
  position: absolute;
}
label.switch > input[type="checkbox"]:focus ~ span {
  box-shadow: 0 0 0 4px #43b556; 
}
label.switch > input[type="checkbox"]:checked:focus ~ span {
  box-shadow: 0 0 0 4px #fff;
}
label.switch > span {
  border-radius: 60px;    
}
label.switch > span:before {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: opacity .2s ease-out .1s, transform .2s ease-out .1s;
  transform: scale(1);
  opacity: 1;
}
label.switch > span:after{
  top: 50%;
  z-index: 3;
  transition: transform .4s cubic-bezier(0.44,-0.12, 0.07, 1.15);
  width: calc(150px / 2);
  height: calc(150px / 2);
  transform: translate3d(0, -50%, 0);
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);  
}

3. Animate the switch when checked.

label.switch > input[type="checkbox"]:checked ~ span:before {
  transform: scale(0);
  opacity: .7;
}
label.switch > input[type="checkbox"]:checked ~ span:after {
  transform: translate3d(100%, -50%, 0);
}

Implementation Tips:

• Keep the checkbox inside the label so clicks on the track and handle update the checked state.
• Add visible label text or an aria-label when the switch appears without nearby text.
• Keep a visible focus style. Keyboard users need a clear focus indicator when the checkbox receives focus.
• Change the track width, track height, and handle size together because the handle position depends on the switch dimensions.

Alternatives:

• Discover More Toggle Switch Libraries
• Simple CSS Toggle Switch Library – a8z
• Customizable Rounded & Square Toggle Switch Web Component
• CSS Only Interactive Toggle Switches – toggle-switch.css
• 10 Best Toggle Switches In JavaScript & Pure CSS

FAQs:

Q: Does this iOS toggle button need JavaScript?
A: No. The checked state comes from the native checkbox, and the visual animation comes from CSS selectors, transforms, and transitions.

Q: Can I use this switch inside a real form?
A: Yes. The control uses an actual checkbox input, so form submission can read the checked or unchecked state.

Q: How do I make the switch smaller?
A: Reduce the switch width, switch height, and handle size together. The handle movement depends on those size values.