<button class="simple">Simple button</button>

button.simple {
  /* the button transition duration property */
  --button-press-duration: 20ms;
  /* the button transition delay property */
  --button-pressed-duration: 10ms;

  /*  Optical alignment corection  */
  padding: 1em 2em 1.05em 2em;
  
  /* remove blue highligt on mobile chromium browsers */
  -webkit-tap-highlight-color: transparent;
  
  /*  Make corners round btw. 50% won't work as expected  */
  border-radius: 999px;
  /* Add shadows */
  box-shadow: 1px 1px 2px 0 hsla(0, 0%, 0%, 0.06), 3px 3px 4px 0 hsla(0, 0%, 0%, 0.08);

  /* Make button stay pressed for a bit longer */
  transition: 
    transform var(--button-press-duration) ease-in var(--button-pressed-duration),
    box-shadow var(--button-press-duration) ease-in var(--button-pressed-duration);
  transform-origin: bottom center;
}

button.simple:hover, button.simple:focus {
  /* Let's create anticipation before the button press */
  transform: translatey(-1px);
  filter: brightness(1.06);
}

button.simple:active {
  /* Make shadows bearly visible on press */
  box-shadow: 0 0 1px 0 hsla(0, 0%, 0%, 0.06), 1px 1px 1px 0 hsla(0, 0%, 0%, 0.08);
  transform: translatey(0.15em) scale(0.98);
  transition: 
    transform var(--button-press-duration) ease-in,
    box-shadow var(--button-press-duration) ease-in;

  /* On touch screens make press transition faster */
  @media (hover: none) and (pointer: coarse) {
    transition: 
      transform calc(var(--button-press-duration) / 4) ease-in,
      box-shadow calc(var(--button-press-duration) / 4) ease-in;
  }
}

/*  Generic button styles */
button {
  font-family: 'Work Sans', sans-serif;
  font-size: calc(1rem + 1.5vmin);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  color: var(--color-on-primary);
  background: var(--color-primary);

  /* Don't forget about keyboard only styles */
  &:focus-visible {
    /* Add simple outline */
    outline: 2px var(--color-primary) solid;
    outline-offset: 0.5rem;
  }
}

/* Make shadows stronger on dark background */
@media (prefers-color-scheme: dark) {
  button.simple { 
    /* Make font bolder in dark mode */
    font-weight: 500;

    box-shadow: 1px 1px 2px 0 hsla(0, 0%, 0%, 0.12), 3px 3px 4px 0 hsla(0, 0%, 0%, 0.23);
  }

  button.simple:active {
    box-shadow: 0 0 1px 0 hsla(0, 0%, 0%, 0.12), 1px 1px 1px 0 hsla(0, 0%, 0%, 0.23);
  }
}

/* Import Work Sans font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500&display=swap');

/* Setup color variables */
:root {
  color-scheme: dark light;
  /* Light mode colors */
  --color-background: hsl(4, 9%, 69%);
  --color-primary: hsl(4, 80%, 60%);
  --color-on-primary: hsl(4, 3%, 99%);

  /* Dark mode colors */
  @media (prefers-color-scheme: dark) {
    --color-background: hsl(4, 12%, 16%);
    --color-primary: hsl(4, 49%, 45%);
    --color-on-primary: hsl(4, 3%, 99%);
  }
}

/* Setup body */
body {
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--color-background);
}

@use postcss-preset-env(stage: 1, browsers: "last 2 versions");