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