Theme Toggler

#codepen #css

A theme change toggler.

So I was just doing some work yesturday and I think let's make a theme toggler button using a checkbox, and I found that it was pretty simple to create one.
Here I am sharing it to you.
We just need some small steps to create it,

Step1: Create a wire frame for checkbox in HTML

<input type='checkbox' id='check' />
<label for='check'></label>

Step2: Create css for it just use some css selector properties to tackle the checked and unchecked checkbox.

body{
  top: 50%;
  left: 50%;
  position: absolute;
  background-color: #000;
}
input[type=checkbox]{
  display:none;
}
label{
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));;
  display: block;
  border-radius: 100px;
  position: relative;

}
label::after{
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 5px;
  left: 5px;
  background-color: #fff;
  border-radius: 50%; 
  transition: all 0.5s;
  transform: translateX(0px);
}


input[type=checkbox]:checked + label::after{
    transition: all 0.5s;
    transform: translateX(50px);
    background-color: #000;
}


.dark{
  postion: absolute;
  margin-top: 34px
}

That's it , here is the result from this little code.