<button>Flat</button>
<button id="foo">Raised</button>
button {
  --is-raised: ; /* off by default */
  padding: 0.6em 1em;
  border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
  border-radius: 0.2em;
  background: var(
      --is-raised,
      linear-gradient(hsl(0 0% 100% / 0.3), transparent)
    )
    hsl(200 100% 50%);
  color: white;
  font: 600 100%/1 sans-serif;
  cursor: pointer;
  box-shadow: var(
    --is-raised,
    0 1px hsl(0 0% 100% / 0.8) inset,
    0 0.1em 0.1em -0.1em rgb(0 0 0 / 0.2)
  );
  text-shadow: var(--is-raised, 0 -1px 1px rgb(0 0 0 / 0.3));
}

button:hover {
  background-color: hsl(200 100% 40%);
}

button:active {
  box-shadow: var(--is-raised, 0 1px 0.2em black inset);
}

#foo {
  --is-raised: initial; /* turn on */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.