<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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.