<button>Hover Me</button>
@layer demo {
  button {
    cursor: pointer;
    background: hsl(0 0% 50% / 20%);
    appearance: none;
    border: none;
    padding: 1.5rem 2.5rem;
    font-size: 1.5rem;
    border-radius: 1rem;
  }
  
  @media (update: fast) {
    button {
      transition: background .3s ease;  
    }
    
    button:is(:hover, :focus) {
      background: hsl(0 0% 50% / 10%);
    }
    
    button:is(:hover, :focus) {
      background: hsl(0 0% 50% / 5%);
    }
  }
  
  @media (update: slow) {
    button:is(:hover, :focus, :active) {
      border: 1px solid CanvasText;
    }
  }
  
  @media (update: none) {
    button {
      background: none;
      border: 1px solid hsl(0 0% 50% / 15%);
    }
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.