How to Create a Split Button Dropdown with CSS

Introduction

A split button dropdown consists of a primary action button and a dropdown menu, providing additional options. The primary button triggers the default action, while the dropdown arrow reveals other options. This is commonly used in interfaces where you want to offer multiple actions from a single button.

In this tutorial, you'll learn how to create a split button dropdown using only HTML and CSS.

Problem Statement

Create a split button dropdown using CSS that:

Displays a primary button and a dropdown arrow button.
Shows additional options when the dropdown button is clicked or hovered.

Example:

Input: A button element with a dropdown arrow and additional menu options.
Output: A button with a dropdown menu that appears on click or hover.

Solution Steps

Use the <button> Element: Create two buttons—one for the primary action and another for the dropdown.
Style the Buttons: Use CSS to style the primary and dropdown buttons.
Create the Dropdown Menu: Use CSS to position and show the dropdown menu when the dropdown button is clicked or hovered.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Split Button Dropdown</title>
    <style>
        /* Step 1: Style the split button container */
        .split-button-container {
            position: relative;
            display: inline-block;
            font-family: Arial, sans-serif;
        }

        /* Step 2: Style the primary button */
        .primary-button {
            background-color: #3498db;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 5px 0 0 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        /* Style the dropdown button */
        .dropdown-button {
            background-color: #3498db;
            color: white;
            padding: 12px;
            border: none;
            border-left: 1px solid #2980b9;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        /* Step 3: Add hover effect for the buttons */
        .primary-button:hover, .dropdown-button:hover {
            background-color: #2980b9;
        }

        /* Step 4: Style the dropdown menu */
        .dropdown-content {
            display: none; /* Hidden by default */
            position: absolute;
            right: 0;
            background-color: #f9f9f9;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            z-index: 1;
            min-width: 160px;
        }

        /* Step 5: Style the dropdown links */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        /* Step 6: Show dropdown menu on hover or click */
        .split-button-container:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <div class="split-button-container">
            <!-- Primary button for the default action -->
            <button class="primary-button">Action</button>

            <!-- Dropdown button for additional options -->
            <button class="dropdown-button">&#x25BC;</button>

            <!-- Dropdown menu -->
            <div class="dropdown-content">
                <a href="#">Option 1</a>
                <a href="#">Option 2</a>
                <a href="#">Option 3</a>
            </div>
        </div>
    </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.:

Explanation

Step 1: Style the Split Button Container

The .split-button-container class is used to group the primary button and the dropdown button together.

.split-button-container {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
}

position: relative: This ensures that the dropdown menu will appear relative to the button.

Step 2: Style the Primary Button

The .primary-button class styles the main action button. The button has padding, background color, and rounded corners.

.primary-button {
    background-color: #3498db; /* Blue background */
    color: white; /* White text */
    padding: 12px 20px; /* Spacing inside the button */
    border: none;
    border-radius: 5px 0 0 5px; /* Rounded left side */
    cursor: pointer; /* Pointer cursor */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition */
}

border-radius: 5px 0 0 5px: Rounds only the left side of the button, creating a clean split button appearance.

The .dropdown-button class styles the dropdown arrow button.

.dropdown-button {
    background-color: #3498db; /* Blue background */
    color: white; /* White text */
    padding: 12px; /* Padding around the arrow */
    border: none;
    border-left: 1px solid #2980b9; /* Creates a border between the two buttons */
    border-radius: 0 5px 5px 0; /* Rounded right side */
    cursor: pointer;
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition */
}

border-left: 1px solid #2980b9: Adds a thin border between the primary and dropdown button to visually separate them.

Step 4: Add Hover Effect

When the user hovers over the button, both the primary and dropdown buttons change color.

.primary-button:hover, .dropdown-button:hover {
    background-color: #2980b9; /* Darker blue on hover */
}

background-color: #2980b9: Changes the background color on hover for both buttons.

The .dropdown-content class defines the appearance and behavior of the dropdown menu, which is hidden by default.

.dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    right: 0; /* Aligns the menu to the right */
    background-color: #f9f9f9; /* Light background */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds shadow for depth */
    border-radius: 5px; /* Rounded corners */
    z-index: 1;
    min-width: 160px; /* Minimum width for the dropdown */
}

The dropdown menu is displayed when the user hovers over the .split-button-container.

.split-button-container:hover .dropdown-content {
    display: block; /* Show the dropdown when hovered */
}

Each dropdown option is styled using the .dropdown-content a class. These options behave like links, and they change background color on hover.

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1; /* Light gray background on hover */
}

Customization

To show the dropdown menu only on click, you can add a bit of JavaScript to toggle the dropdown menu:

<script>
    document.querySelector('.dropdown-button').addEventListener('click', function() {
        const dropdown = this.nextElementSibling;
        dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
    });
</script>

Change Button Colors

You can change the button colors by modifying the background-color and hover colors:

.primary-button {
    background-color: #e74c3c; /* Red background */
}

.dropdown-button {
    background-color: #e74c3c; /* Red background */
}

To add an icon instead of a text arrow, you can use Font Awesome or any icon library:

<button class="dropdown-button"><i class="fas fa-chevron-down"></i></button>

Conclusion

You can create a split button dropdown in CSS by styling two buttons—one for the primary action and another for the dropdown menu. Using CSS for styling and positioning, you can create a clean, interactive button with additional menu options. This effect is useful for providing multiple actions from a single button in a clean and efficient way.

Java Guides

Search This Blog