Demo 5: Toggle Buttons Group (CSS Toggles)

← to index
CSS Toggles
Toggle Attribute

How

Set a toggle pointing to self on each button in the group.

Code

HTML

<div class="button-group">
    <form action="">
        <button>left</button>
        <button>center</button>
        <button>right</button>
    </form>
</div>

CSS

.button-group button {
    toggle: btn 1 at 0 group sticky;
    cursor: pointer;
    background-color: #d4d4d4;
    border: 2px solid #666;
}

.button-group button:toggle(btn) {
    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.