<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);
}
const fancyButton = document.getElementById('fancy-button');

fancyButton.onclick = () => alert("I've been clicked! :)");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.