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