<button class="primary">Click Me</button>
<button class="primary" disabled>Click Me</button>

<button class="secondary">Click Me</button>
<button class="secondary" disabled>Click Me</button>
button {
  color: var(--label-color);
  background-color: var(--background-color);
  border-color: var(--border-color);

  border-width: 4px;
  border-style: solid;

  padding: 10px 64px;
  border-radius: 8px;
  font-size: 18px;
}

button:hover {
  background-color: var(--background-hover-color);
}

button:active {
  background-color: var(--background-active-color);
}

button[disabled] {
  color: var(--label-disabled-color);
  background-color: var(--background-disabled-color);
  border-color: var(--border-disabled-color);
}

button.primary {
  --label-color: hsl(0, 0%, 100%);
  --background-color: hsl(230, 60%, 50%);
  --border-color: hsl(230, 60%, 50%);
}

button.primary:hover {
  --background-hover-color: hsl(230, 60%, 55%);
}

button.primary:active {
  --background-active-color: hsl(230, 60%, 60%);
}

button.primary[disabled] {
  --label-disabled-color: hsl(0, 0%, 100%);
  --background-disabled-color: hsl(0, 0%, 63%);
  --border-disabled-color: hsl(0, 0%, 63%);
}

button.secondary {
  --label-color: hsl(230, 60%, 50%);
  --background-color: hsl(0, 0%, 100%);
  --border-color: hsl(230, 60%, 50%);
}

button.secondary:hover {
  --background-hover-color: hsl(230, 55%, 80%);
}

button.secondary:active {
  --background-active-color: hsl(230, 55%, 85%);
}

button.secondary[disabled] {
  --label-disabled-color: hsl(0, 0%, 63%);
  --background-disabled-color-color: hsl(0, 0%, 100%);
  --border-disabled-color: hsl(0, 0%, 63%);
}

button:not(:last-of-type) {
  margin-right: 16px;
}
html {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  
  height: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.