Minimalist workspace with monitor and keyboard

Creating Professional Button Groups with HTML and CSS

Button groups are essential UI components that help organize related actions together. In this guide, we'll create a responsive button group with hover effects using clean HTML and CSS, following modern web development practices.

HTML Structure

The foundation of our button group is simple semantic HTML:

<div class="button-group">
    <button>C</button>
    <button>CPP</button>
    <button>JAVA</button>
    <button>HTML</button>
    <button>CSS</button>
</div>

Semantic Markup Tip: Using a div with a class of "button-group" clearly indicates the purpose of this container, making the code more maintainable.

CSS Implementation

Here's the CSS to style our button group with proper spacing and interactions:

.button-group {
    display: flex;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.button-group button {
    flex: 1;
    padding: 15px 0;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background-color: coral;
    border: 1px solid #d35400;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button-group button:hover {
    background-color: #4c6;
}

.button-group button:not(:last-child) {
    border-right: none;
}

.button-group button:first-child {
    border-radius: 5px 0 0 5px;
}

.button-group button:last-child {
    border-radius: 0 5px 5px 0;
}

Enhanced Version with Active State

Let's improve our button group with an active state indicator:

.button-group button.active {
    background-color: #2c3e50;
    position: relative;
}

.button-group button.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #3498db;
}

JavaScript for Interactive Functionality

Add this JavaScript to handle the active state:

document.querySelectorAll('.button-group button').forEach(button => {
    button.addEventListener('click', function() {
        // Remove active class from all buttons
        document.querySelectorAll('.button-group button').forEach(btn => {
            btn.classList.remove('active');
        });
        
        // Add active class to clicked button
        this.classList.add('active');
    });
});

Accessibility Considerations

Add ARIA roles and attributes for screen readers
Ensure sufficient color contrast
Provide keyboard navigation support
Include focus states for tab navigation

Complete Accessible Example

<div class="button-group" role="group" aria-label="Programming language selection">
    <button role="radio" aria-checked="false">C</button>
    <button role="radio" aria-checked="false">CPP</button>
    <button role="radio" aria-checked="false">JAVA</button>
    <button role="radio" aria-checked="false">HTML</button>
    <button role="radio" aria-checked="true">CSS</button>
</div>

Golden Rule

Keep button labels clear and concise
Maintain consistent spacing between buttons
Use subtle transitions for hover effects
Ensure the button group is responsive
Test with various screen sizes and devices

Conclusion

Button groups are powerful UI components when implemented correctly. By following the patterns in this guide, you can create button groups that are:

Visually consistent with your design system
Fully accessible to all users
Responsive across devices
Intuitive to interact with

How To Create Button Group Using HTML and CSS