Button Group Template

Group together related actions into a single, cohesive unit with this flexible button group component.

This is a classic UI pattern used for creating toolbars, view switchers, or any set of options that should be visually connected.

Get Source Code Preview

About the Button Group

A button group visually merges multiple buttons, removing the space between them to imply a strong relationship. It's an effective way to organize an interface and reduce clutter. To be accessible, a button group should be contained within an element that has a role="group" and an aria-label that describes the purpose of the group as a whole.

Features

Cohesive Design: CSS is used to collapse the margins and merge the borders between adjacent buttons, making them appear as a single element.
Accessible Grouping: The containing div uses role="group" and an aria-label to properly inform screen readers what the group of controls is for.
Flexible Content: The buttons can contain just text, just icons, or a combination of both.
CSS-Only and Easy to Use: The styling logic is handled entirely by CSS, making the component simple to implement.

Code Breakdown

The structure is a parent div with role="group" and multiple button elements inside. The main styling comes from a few CSS rules. First, Flexbox is used on the container to align the buttons. Then, to create the joined effect, CSS targets every button that is not the first one (.btn-group-1 > :not(:first-child)) and removes its left-side border-radius and sets its margin-left to a negative value that equals the border width. A similar rule removes the right-side border-radius of every button that is not the last one.

Code

Here is the complete code for the accessible button group.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Group</title>
    <style>
        /*
         Component: Button Group
         Description: A set of related buttons that are visually joined together.
        */
        :root {
            --btn-group-border-color: #007bff;
            --btn-group-bg: #ffffff;
            --btn-group-text-color: var(--btn-group-border-color);
            --btn-group-bg-hover: #007bff;
            --btn-group-text-hover: #ffffff;
            --btn-group-focus-outline: #007bff;
        }

.btn-group-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            background-color: #f8f9fa;
        }

.btn-group-1 {
            display: inline-flex;
            border-radius: 8px; /* The container has the radius */
            overflow: hidden; /* This helps with border-radius on children */
        }
        
        .btn-group-1 button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.5;
            
            color: var(--btn-group-text-color);
            background-color: var(--btn-group-bg);
            
            border: 1px solid var(--btn-group-border-color);
            border-radius: 0; /* Individual buttons have no radius initially */
            
            cursor: pointer;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
        }

/* --- Joining Logic --- */
        /* All but the first child have their left border removed via negative margin */
        .btn-group-1 button:not(:first-child) {
            margin-left: -1px;
        }

/* All but the last child */
        .btn-group-1 button:not(:last-child) {
            border-right-width: 1px;
        }

/* Apply border-radius to the first and last buttons in the group */
        .btn-group-1 button:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        
        .btn-group-1 button:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }
        
        /* --- Interaction States --- */
        .btn-group-1 button:hover {
            background-color: var(--btn-group-bg-hover);
            color: var(--btn-group-text-hover);
            z-index: 2; /* Bring the hovered button to the front */
        }

.btn-group-1 button:focus-visible {
            outline: 2px solid var(--btn-group-focus-outline);
            outline-offset: 2px;
            z-index: 3;
        }

.btn-group-1 button svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

</style>
</head>
<body>

</body>
</html>

View Output