Nov 11, 20222.8K views
CSSAdd prefixes
1.switch { 2 background-color: black; 3 width: 150px; 4 height: 195px; 5 box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black; 6 border-radius: 5px; 7 padding: 20px; 8 perspective: 700px; 9} 10 11.switch input { 12 display: none; 13} 14 15.switch input:checked + .button { 16 transform: translateZ(20px) rotateX(25deg); 17 box-shadow: 0 -10px 20px #ff1818; 18} 19 20.switch input:checked + .button .light { 21 animation: flicker 0.2s infinite 0.3s; 22} 23 24.switch input:checked + .button .shine { 25 opacity: 1; 26} 27 28.switch input:checked + .button .shadow { 29 opacity: 0; 30} 31 32.switch .button { 33 transition: all 0.3s cubic-bezier(1, 0, 1, 1); 34 transform-origin: center center -20px; 35 transform: translateZ(20px) rotateX(-25deg); 36 transform-style: preserve-3d; 37 background-color: #9b0621; 38 width: 66%; 39 height: 100%; 40 position: relative; 41 cursor: pointer; 42 background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%); 43 background-repeat: no-repeat; 44} 45 46.switch .button::before { 47 content: ""; 48 background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000; 49 background-repeat: no-repeat; 50 width: 100%; 51 height: 50px; 52 transform-origin: top; 53 transform: rotateX(-90deg); 54 position: absolute; 55 top: 0; 56} 57 58.switch .button::after { 59 content: ""; 60 background-image: linear-gradient(#650000, #320000); 61 width: 100%; 62 height: 50px; 63 transform-origin: top; 64 transform: translateY(50px) rotateX(-90deg); 65 position: absolute; 66 bottom: 0; 67 box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5); 68} 69 70.switch .light { 71 opacity: 0; 72 animation: light-off 1s; 73 position: absolute; 74 width: 100%; 75 height: 100%; 76 background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%); 77} 78 79.switch .dots { 80 position: absolute; 81 width: 100%; 82 height: 100%; 83 background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%); 84 background-size: 10px 10px; 85} 86 87.switch .characters { 88 position: absolute; 89 width: 100%; 90 height: 100%; 91 background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%; 92 background-repeat: no-repeat; 93} 94 95.switch .shine { 96 transition: all 0.3s cubic-bezier(1, 0, 1, 1); 97 opacity: 0.3; 98 position: absolute; 99 width: 100%; 100 height: 100%; 101 background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%; 102 background-repeat: no-repeat; 103} 104 105.switch .shadow { 106 transition: all 0.3s cubic-bezier(1, 0, 1, 1); 107 opacity: 1; 108 position: absolute; 109 width: 100%; 110 height: 100%; 111 background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8)); 112 background-repeat: no-repeat; 113} 114 115@keyframes flicker { 116 0% { 117 opacity: 1; 118 } 119 120 80% { 121 opacity: 0.8; 122 } 123 124 100% { 125 opacity: 1; 126 } 127} 128 129@keyframes light-off { 130 0% { 131 opacity: 1; 132 } 133 134 80% { 135 opacity: 0; 136 } 137}
HTML
1 2<label class="switch"> 3 <input type="checkbox" checked="checked"> 4 <div class="button"> 5 <div class="light"></div> 6 <div class="dots"></div> 7 <div class="characters"></div> 8 <div class="shine"></div> 9 <div class="shadow"></div> 10 </div> 11</label>