.button { align-items: center; background: var(--color-terminal-blue); border: none; border-radius: 0.4em; box-shadow: 0 1px 0 0 rgba(var(--rgb-black), 0.1), 0 0.2em 1.2em -0.4em rgba(var(--rgb-black), 0.2), 0 0.4em 2.0em -0.8em rgba(var(--rgb-black), 0.3), 0 0.4em 0.4em -0.8em rgba(var(--rgb-black), 0.4), 0 0.8em 0.8em -1.2em rgba(var(--rgb-black), 0.5), 0 1.2em 1.2em -1.6em rgba(var(--rgb-black), 0.6) ; color: var(--color-background-night); cursor: pointer; display: flex; font-weight: 700; gap: 1ch; height: 2.9em; line-height: 1; padding-inline: var(--space-medium); text-decoration: none; text-transform: uppercase; transition: background var(--transition), color var(--transition) ; } .button svg { height: 1.4em; overflow: visible; width: 1.4em; } .button span { margin-bottom: -0.1875em; margin-top: -0.125em; } @media(hover: hover) { .button:hover { background: var(--color-turquoise); color: var(--color-background-night); } }