DEV Community

Cover image for 3D Toggle Switch CSS Button
Jon Snow
Jon Snow

Posted on

3D Toggle Switch CSS Button

3D Toggle Switch CSS Button


3D Toggle Switch CSS Button


HTML Code

<div class="container">
  <input id="checkbox" name="checkbox" type="checkbox">
  <label class="label" for="checkbox"></label> 
</div>
Enter fullscreen mode Exit fullscreen mode

CSS Code

.container {
}

.label {
  height: 60px;
  width: 120px;
  background-color: #ffffff;
  border-radius: 30px;
  -webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
    inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
    inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
}

/* Visit https://democoding.in/ for more free css animation */

.label:hover {
  -webkit-transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
  transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
}

#checkbox:checked ~ .label:hover {
  -webkit-transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
  transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
}

#checkbox {
  display: none;
}

#checkbox:checked ~ .label::before {
  left: 70px;
  background-color: #000000;
  background-image: linear-gradient(315deg, #000000 0%, #414141 70%);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.label::before {
  position: absolute;
  content: "";
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: #000000;
  background-image: linear-gradient(
    130deg,
    #757272 10%,
    #ffffff 11%,
    #726f6f 62%
  );
  left: 10px;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
Enter fullscreen mode Exit fullscreen mode

Check Our Latest Post


Thanks for Reading ❤️! Check my website Demo coding for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : Demo code


Top comments (1)

Collapse
 
ant_f_dev profile image
Anthony Fung

Very cool!

Would it be possible to somehow animate a colour transition between the black and white states?