<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%);
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.