3D Toggle Switch CSS Button
HTML Code
<div class="container">
<input id="checkbox" name="checkbox" type="checkbox">
<label class="label" for="checkbox"></label>
</div>
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;
}
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)
Very cool!
Would it be possible to somehow animate a colour transition between the black and white states?