#212121
1.container { 2 display: flex; 3 position: relative; 4 gap: 4px; 5 color: white; 6} 7 8.container input[type="radio"] { 9 position: absolute; 10 opacity: 0; 11 cursor: pointer; 12 height: 0; 13 width: 0; 14} 15 16.container input[type="radio"]:checked + .button { 17 opacity: 1; 18} 19 20.container input[type="radio"]:checked + .button .pop { 21 animation: fly-up 0.5s ease-in-out; 22} 23 24.button { 25 position: relative; 26 border: none; 27 background: transparent; 28 padding: 0; 29 cursor: pointer; 30 outline-offset: 4px; 31 transition: filter 250ms; 32 user-select: none; 33 touch-action: manipulation; 34 width: 50px; 35 border-radius: 30px; 36 height: 50px; 37 opacity: 0.4; 38 box-shadow: 0px 0px 40px -5px hsl(170deg 100% 40%); 39} 40 41.button .pop { 42 width: 22px; 43 height: 22px; 44 position: absolute; 45 display: block; 46 left: 50%; 47 z-index: -1; 48 transform: translate(-50%, 0); 49 top: 0; 50 opacity: 0.3; 51} 52 53@keyframes fly-up { 54 0% { 55 transform: translate(-50%, 0); 56 } 57 58 50% { 59 transform: translate(-50%, -40px); 60 } 61 62 100% { 63 transform: translate(-50%, 0); 64 } 65} 66 67.button .shadow { 68 position: absolute; 69 top: 0; 70 left: 0; 71 width: 100%; 72 height: 100%; 73 border-radius: 12px; 74 background: hsl(0deg 0% 0% / 0.25); 75 will-change: transform; 76 transform: translateY(2px); 77 transition: all 78 600ms 79 cubic-bezier(.3, .7, .4, 1); 80} 81 82.button .edge { 83 position: absolute; 84 top: 0; 85 left: 0; 86 width: 100%; 87 height: 100%; 88 border-radius: 12px; 89 background: linear-gradient( 90 to left, 91 hsl(170deg 100% 16%) 0%, 92 hsl(170deg 100% 32%) 8%, 93 hsl(170deg 100% 32%) 92%, 94 hsl(170deg 100% 16%) 100% 95 ); 96} 97 98.button .front { 99 display: flex; 100 align-items: center; 101 justify-content: center; 102 position: relative; 103 width: 100%; 104 height: 100%; 105 border-radius: 12px; 106 font-size: 1.1rem; 107 color: white; 108 background: hsl(170deg 100% 50%); 109 will-change: transform; 110 transform: translateY(-4px); 111 box-shadow: inset 4px 4px 8px hsl(170deg 100% 30%), inset -4px -4px 8px hsl(170deg 100% 80%); 112 transition: all 113 600ms 114 cubic-bezier(.3, .7, .4, 1); 115} 116 117.button .front svg { 118 display: block; 119 color: hsl(170deg 100% 30%); 120 margin-right: 0; 121} 122 123.button:hover .front { 124 transform: translateY(-6px); 125 transition: transform 126 127 250ms 128 cubic-bezier(.3, .7, .4, 1.5); 129} 130 131.button:active .front { 132 transform: translateY(-2px); 133 transition: transform 34ms; 134} 135 136.button:hover .shadow { 137 transform: translateY(4px); 138 transition: transform 139 250ms 140 cubic-bezier(.3, .7, .4, 1.5); 141} 142 143.button:active .shadow { 144 transform: translateY(1px); 145 transition: transform 34ms; 146}
Comments
MIT License