Demo 5: Toggle Buttons Group (Toggle Attribute)
How
Set a toggle
pointing to self
on each button in the group.
Code
HTML
<div class="button-group" toggle-group="btn">
<form action="">
<button type="toggle">left</button>
<button type="toggle">center</button>
<button type="toggle">right</button>
</form>
</div>
CSS
.button-group button {
cursor: pointer;
background-color: #d4d4d4;
border: 2px solid #666;
}
.button-group button:toggle() {
background-color: #aaa;
border: 2px solid hotpink;
}
.button-group button:hover {
background-color: #eee;
}
Demo (by Bramus)
ℹ Your browser does not support CSS Toggles. To cater for this a polyfill has been loaded.