<div>
<button id="fancy-button" tabindex="-1" aria-label="Ugly Button">I'm a Fancy Button!</button>
</div>
div {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
--color-primary: hsl(14, 100%, 50%);
--color-heart: hsl(333, 93%, 56%);
--color-brightText: hsl(0, 0%, 100%);
--margin-sm: 0.625rem;
--margin-lg: 1.875rem;
--shadow: 0 5px 30px var(--color-shadow);
--border-radius-sm: 0.625rem;
}
#fancy-button {
color: var(--color-brightText);
background: linear-gradient(45deg, var(--color-primary), var(--color-heart));
border: none;
padding: var(--margin-sm) var(--margin-lg);
border-radius: var(--border-radius-sm);
box-shadow: var(--shadow);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.