<button>button</button>
<button disabled="disabled">disabled button</button>
<div style="--hue: 0">
<button>button</button>
<button disabled="disabled">disabled button</button>
</div>
<div style="--hue: 120">
<button>button</button>
<button disabled="disabled">disabled button</button>
</div>
button {
--lightness: 50%;
background-color: hsl(var(--hue, 220), 80%, var(--lightness));
}
button:hover {
background-color: hsl(var(--hue, 220), 80%, calc(var(--lightness) - 20%));
}
button:disabled {
background-color: hsl(var(--hue, 220), 10%, 50%);
}
button {
padding: 10px 15px;
border-radius: 5px;
margin: 10px;
font-size: 16px;
border: none;
color: white;
}
button:not(:disabled) {
cursor: pointer;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.