<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 */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.