<button>Primary button</button>
<button class="secondary">Secondary button</button>

:root {
  --brand: rgb(0 0 255);
  --brand-light: color-mix(in srgb, blue, white);

  --secondary: color-mix(in srgb, var(--brand), pink);
  --secondary-light: color-mix(in srgb, var(--secondary), white);
}
* {
  box-sizing: border-box;
}

:root {
  --brand: rgb(0 0 255);
  --brand-light: color-mix(in srgb, blue, white);

  --secondary: color-mix(in srgb, var(--brand), pink);
  --secondary-light: color-mix(in srgb, var(--secondary), white);
}

button {
  appearance: none;
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 0.65rem;
}
button {
  background-color: var(--brand);
  color: white;
}

button:where(:hover, :focus) {
  background-color: var(--brand-light);
}

button.secondary {
  background-color: var(--secondary);
}

button.secondary:where(:hover, :focus) {
  background-color: var(--secondary-light);
}