#212121
1.container { 2} 3 4.label { 5 height: 60px; 6 width: 120px; 7 background-color: #ffffff; 8 border-radius: 30px; 9 -webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1), 10 inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096), 11 inset 0 0 0 3px rgba(0, 0, 0, 0.3); 12 box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1), 13 inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096), 14 inset 0 0 0 3px rgba(0, 0, 0, 0.3); 15 display: -webkit-box; 16 display: -ms-flexbox; 17 display: flex; 18 -webkit-box-align: center; 19 -ms-flex-align: center; 20 align-items: center; 21 cursor: pointer; 22 position: relative; 23 -webkit-transition: -webkit-transform 0.4s; 24 transition: -webkit-transform 0.4s; 25 transition: transform 0.4s; 26} 27 28.label:hover { 29 -webkit-transform: perspective(100px) rotateX(5deg) rotateY(-5deg); 30 transform: perspective(100px) rotateX(5deg) rotateY(-5deg); 31} 32 33#checkbox:checked ~ .label:hover { 34 -webkit-transform: perspective(100px) rotateX(-5deg) rotateY(5deg); 35 transform: perspective(100px) rotateX(-5deg) rotateY(5deg); 36} 37 38#checkbox { 39 display: none; 40} 41 42#checkbox:checked ~ .label::before { 43 left: 70px; 44 background-color: #000000; 45 background-image: linear-gradient(315deg, #000000 0%, #414141 70%); 46 -webkit-transition: 0.4s; 47 transition: 0.4s; 48} 49 50.label::before { 51 position: absolute; 52 content: ""; 53 height: 40px; 54 width: 40px; 55 border-radius: 50%; 56 background-color: #000000; 57 background-image: linear-gradient( 58 130deg, 59 #757272 10%, 60 #ffffff 11%, 61 #726f6f 62% 62 ); 63 left: 10px; 64 -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3); 65 box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3); 66 -webkit-transition: 0.4s; 67 transition: 0.4s; 68} 69
Comments
Variations
1 MIT License