/* HTML */ <a href="#"><button class="button-12"><span class="button-12-shadow"></span><span class="button-12-edge"> </span><span class="front text"> Click me</span></button></a> /* CSS */ .button-12 { position: relative; border: none; background: transparent; padding: 0; cursor: pointer; outline-offset: 4px; transition: filter 250ms; user-select: none; touch-action: manipulation; } .button-12-shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; background: hsl(0deg 0% 0% / 0.25); will-change: transform; transform: translateY(2px); transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .button-12-edge { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; background: linear-gradient( to left, hsl(340deg 100% 16%) 0%, hsl(340deg 100% 32%) 8%, hsl(340deg 100% 32%) 92%, hsl(340deg 100% 16%) 100% ); } .front { display: block; position: relative; padding: 12px 27px; border-radius: 5px; font-size: 1.1rem; color: white; background: hsl(345deg 100% 47%); will-change: transform; transform: translateY(-4px); transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .button-12:hover { filter: brightness(110%); } .button-12:hover .front { transform: translateY(-6px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); } .button-12:active .front { transform: translateY(-2px); transition: transform 34ms; } .button-12:hover .shadow { transform: translateY(4px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); } .button-12:active .shadow { transform: translateY(1px); transition: transform 34ms; } .button-12:focus:not(:focus-visible) { outline: none; }
0 Comments