Day 1: Button 🎅

Let's start with a classic button. Every website needs one, right?

The example component is visible below.

Joy to the world! 🎄 🎅

A few notes about this button component:

• CSS Variables are used for colors,
• the default button style is reset using the all: unset declaration,
• the font-family: inherit declaration is mandatory to apply font family to a button,
• the :after pseudo-element is used for smooth hover transition,
• the outline property is used for focus indication,
• to respect the user preference for reduced motion, --transition-duration-xmas CSS variable is set to 0s (read more about using CSS Variables for reduced motion on a global scale).

The code:

<button type="button" class="advent-button">Merry Christmas! 🎄</button>

.advent-button {
  --color-xmas-beta: #d72621;
  --color-xmas-alpha: #f7efef;
  --color-xmas-gamma: #639565;
  --transition-duration-xmas: .3s;

  all: unset;

  background-color: var(--color-xmas-alpha);
  color: var(--color-xmas-beta);

  font-family: inherit;
  font-size: 1rem;
  letter-spacing: .06em;
  line-height: 1.66;
  text-transform: uppercase;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  min-height: 3em;
  padding: .3em 3em;
  border-radius: 1.2em;
  border: .6em solid var(--color-xmas-beta);

  cursor: pointer;
}

.advent-button:after {
  content: "";
  position: absolute;
  top: -0.6em;
  right: -0.6em;
  bottom: -0.6em;
  left: -0.6em;
  z-index: -1;
  border-radius: .6em;
  background-color: var(--color-xmas-beta);
  transform: scale(.8);
  transition: transform cubic-bezier(0.3, 0.9, 0.3, 1.2) var(--transition-duration-xmas);
}

.advent-button:hover:after,
.advent-button:focus:after {
  transform: scale(1);
}

.advent-button:focus:after {
  outline: .3em dashed var(--color-xmas-gamma);
  outline-offset: .3em;
}

.advent-button:active:after {
  outline: none;
  transform: scale(.8);
}

@media (prefers-reduced-motion: reduce) {
  .advent-button {
    --transition-duration-xmas: 0s;
  }
}

P.S. I usually don't group properties like this, but I've used it for better readability.