Create Pure CSS toggle checkbox

RH Suman
June 20, 2022

39

If you are into web development you will for sure know what a "toggle switch" is. There's almost no website or web application that is not using them nowadays. It's a design element that provides the users a way to choose between two different states. Commonly used in websites, mobile apps, and other software.
Create Pure CSS toggle checkbox

HTML Code:

<input type="checkbox"> I Like It

CSS Code:

*,*::before,*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:#eee;
  font-size: 2rem;
  font-family: sans-sarif;
}
input {
  position: relative;
  margin: 0 10px;
  width: 100px; 
  height: 50px;
  border-radius: 25px;
  background: #999;
  outline: 0;
  -webkit-appearance: none;
  cursor: pointer;
}
input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: calc((100% - 4px) / 2);
  height: calc(100% - 4px);
  border-radius: 50%;
  background: #eee;
  transition: all .1s linear;
}
input:checked {
  background: #5b5;
}
input:checked::after {
  transform: translateX(100%);
}

Preview:

Tags

HTML CSS Animation Hover Checkbox Toggle

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts