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