How to Create a Button Group with HTML and CSS

Introduction

A button group is a set of buttons that are grouped together, often used for navigation or action controls on websites. It helps to organize buttons neatly in a row, making it easier for users to access multiple actions in one place. In this guide, you’ll learn how to create a button group using HTML and CSS.

Development Steps

Create Basic HTML: Write the HTML structure for the button group.
Style the Button Group with CSS: Use CSS to style the buttons and align them into a group.
Customize the Buttons: Add custom styles like spacing, hover effects, and borders.

Step 1: Create Basic HTML

We’ll start by creating the HTML structure for the button group. The buttons will be inside a div container.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Group Example</title>
</head>
<body>

    <!-- Step 1: Button group structure -->
    <div class="button-group">
        <button class="btn">Button 1</button>
        <button class="btn">Button 2</button>
        <button class="btn">Button 3</button>
    </div>

</body>
</html>

Explanation:

The <div class="button-group"> contains the buttons, keeping them grouped together.
Each <button> element has a class btn that we’ll style with CSS.

Step 2: Style the Button Group with CSS

Now, we’ll style the buttons to look like a unified group. We will remove the border between buttons to make them appear connected and apply basic styles.

/* Step 2: Style for button group */
.button-group {
    display: flex; /* Align buttons in a row */
}

.btn {
    padding: 10px 20px; /* Add padding inside buttons */
    background-color: #3498db; /* Blue background */
    color: white; /* White text color */
    border: 1px solid #3498db; /* Border matching the background */
    cursor: pointer;
    font-size: 16px; /* Set font size */
    border-radius: 0; /* Remove border-radius for connected look */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.btn + .btn {
    border-left: none; /* Remove left border between buttons */
}

Explanation:

display: flex;: Aligns the buttons in a row.
border-left: none;: Removes the border between buttons so they appear connected.
border-radius: 0;: Removes rounded corners, making the buttons look like they belong to the same group.
background-color: #3498db;: Gives the buttons a blue background.

Step 3: Customize the Buttons

We’ll enhance the button group by adding a hover effect and adjusting the spacing between the buttons.

/* Step 3: Hover effect for buttons */
.btn:hover {
    background-color: #2980b9; /* Darker blue on hover */
}

/* Add rounded corners for the first and last button */
.button-group .btn:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.button-group .btn:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

Explanation:

:hover: Changes the background color to a darker blue when the user hovers over a button.
border-top-left-radius and border-top-right-radius: Adds rounded corners to the first and last buttons to give the group a smooth look.

Complete Code Example

Here’s the full HTML and CSS code to create a button group with a modern style:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Group Example</title>
    <style>
        /* Style for button group */
        .button-group {
            display: flex; /* Align buttons in a row */
        }

        .btn {
            padding: 10px 20px; /* Add padding inside buttons */
            background-color: #3498db; /* Blue background */
            color: white; /* White text color */
            border: 1px solid #3498db; /* Border matching the background */
            cursor: pointer;
            font-size: 16px; /* Set font size */
            border-radius: 0; /* Remove border-radius for connected look */
            transition: background-color 0.3s ease; /* Smooth transition on hover */
        }

        .btn + .btn {
            border-left: none; /* Remove left border between buttons */
        }

        /* Hover effect for buttons */
        .btn:hover {
            background-color: #2980b9; /* Darker blue on hover */
        }

        /* Add rounded corners for the first and last button */
        .button-group .btn:first-child {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .button-group .btn:last-child {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    </style>
</head>
<body>

    <div class="button-group">
        <button class="btn">Button 1</button>
        <button class="btn">Button 2</button>
        <button class="btn">Button 3</button>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this guide, you learned how to create a button group using HTML and CSS. The buttons are neatly aligned in a row and appear connected with no borders between them. You can further customize the button group by adjusting the styles, adding more buttons, or changing colors to suit your design needs.

Java Guides

Search This Blog