3D Toggle Switch CSS Button

<div class="container"> <input id="checkbox" name="checkbox" type="checkbox"> <label class="label" for="checkbox"></label> </div> 

.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; }