3D Toggle Click using html css

Following code for making 3D toggle button.

HTML:

<input type='checkbox' id='c3d'/>

<label for='c3d'>Toggal</label>

CSS:

body {

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0;

  height: 100vh;

  perspective-origin: calc(50% + 10rem) calc(50% - 10rem);

  perspective: 32em;

  background: radial-gradient(#564e4e, #ddd);

}

[type='checkbox'] {

  position: absolute;

  left: -100vw;

}

[type='checkbox'] + label {

  --s: 0;

  position: relative;

  border: solid 0.625rem #f0f0f0;

  width: 10rem;

  height: 5rem;

  border-radius: 5rem;

  transform-style: preserve-3d;

  transform: rotatex(90deg) rotate(22.5deg) rotatey(22.5deg);

  color: transparent;

  font-size: 0;

  -webkit-tap-highlight-color: transparent;

  cursor: pointer;

}

[type='checkbox'] + label:before, [type='checkbox'] + label:after {

  position: absolute;

  width: 5rem;

  height: 5rem;

  border-radius: 50%;

  transition: 0.35s cubic-bezier(0.21, 0.61, 0.35, 1);

  content: "";

}

[type='checkbox'] + label:before {

  top: calc(50% + .875rem);

  transform-origin: 100% 0;

  transform: translate(calc(var(--s)*(100% + 1rem))) scale(0.8) skewx(-22.5deg);

  background: radial-gradient(at 50% 25%, rgba(160, 160, 160, 0.65), transparent 70%);

  filter: blur(3px);

}

[type='checkbox'] + label:after {

  top: .875rem;

  left: .75rem;

  transform: translate(calc(var(--s)*(100% + 1rem))) rotatey(-22.5deg) rotate(-22.5deg) rotatex(-90deg) translatey(-50%) rotate(45deg);

  box-shadow: -1px 1px 0.125rem rgba(206, 255, 206, 0.5);

  background: radial-gradient(at 0 50%, #52a066, transparent 2.5rem) 0 50%/65% 50% no-repeat, radial-gradient(at 50% 0%, #88d1a0 15%, #68b47d 35%, #66b47b, #77c28e 65%) 50%/200%;

  filter: Grayscale(calc(1 - var(--s)));

}

[type='checkbox']:checked + label {

  --s: 1 ;

}

OUTPUT :

Fruxinfo Pvt. Ltd