HTML reset copy

<br><br><br><br><br><br> <center> <button class="net-net1" role="button"> <span class="net-net2"></span> <span class="net-net3"></span> <span class="net-net4"> welcome </span> </button> </center>

CSS reset copy

.net-net1 { position: relative; border: none; background: transparent; padding: 0; cursor: pointer; outline-offset: 4px; transition: filter 250ms; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .net-net2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; background: hsl(0deg 0% 0% / 0.25); will-change: transform; transform: translateY(2px); transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .net-net3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; 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% ); } .net-net4 { display: block; position: relative; padding: 12px 27px; border-radius: 12px; 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); } @media (min-width: 768px) { .net-net4 { font-size: 1.25rem; padding: 12px 42px; } } .net-net1:hover { filter: brightness(110%); } .net-net1:hover .net-net4 { transform: translateY(-6px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); } .net-net1:active .net-net4 { transform: translateY(-2px); transition: transform 34ms; } .net-net1:hover .net-net2 { transform: translateY(4px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); } .net-net1:active .net-net2 { transform: translateY(1px); transition: transform 34ms; } .net-net1:focus:not(:focus-visible) { outline: none; }