<button>Space Toggles</button>
button {
--_hover: initial;
&:hover {
--_hover: ;
/* space, get it, toggle */
/* becomes pass through, harmless to syntax */
}
}
button {
background-color: var(--_hover) green;
}
@layer demo.support {
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
color-scheme: dark light;
scrollbar-color: color-mix(in srgb, CanvasText, #0000 50%) #0000;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
place-content: center;
}
button {
padding-inline: 2lh;
padding-block: 1lh;
border: 1px solid color-mix(in oklab, CanvasText, #0000 80%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.