Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a split button dropdown with CSS?

CSS Web Development Front End Technology

A split button dropdown combines a primary action button with a secondary dropdown arrow button. This creates two clickable areas within the same button component - the main button for the primary action and the arrow for accessing additional options.

Syntax

.split-button {
    display: inline-flex;
}

.dropdown:hover .dropdown-content {
    display: block;
}

Creating the Button Structure

First, create the HTML structure with two buttons side by side −

<!DOCTYPE html>
<html>
<head>
<style>
    .split-button {
        display: inline-flex;
        font-family: Arial, sans-serif;
    }
    
    .main-btn, .dropdown-btn {
        background-color: #007bff;
        color: white;
        padding: 12px 20px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        outline: none;
    }
    
    .main-btn {
        border-radius: 4px 0 0 4px;
    }
    
    .dropdown-btn {
        border-radius: 0 4px 4px 0;
        border-left: 1px solid #0056b3;
        padding: 12px 15px;
    }
    
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 200px;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
        z-index: 1;
        border-radius: 4px;
        top: 100%;
        right: 0;
    }
    
    .dropdown-content a {
        color: #333;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #eee;
    }
    
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .main-btn:hover, .dropdown-btn:hover {
        background-color: #0056b3;
    }
</style>
</head>
<body>
    <div class="split-button">
        <button class="main-btn">Save Document</button>
        <div class="dropdown">
            <button class="dropdown-btn">?</button>
            <div class="dropdown-content">
                <a href="#">Save as PDF</a>
                <a href="#">Save as Word</a>
                <a href="#">Save to Cloud</a>
                <a href="#">Email Document</a>
            </div>
        </div>
    </div>
</body>
</html>

A blue split button appears with "Save Document" as the main action and a dropdown arrow. Hovering over the arrow reveals a dropdown menu with four save options.

Alternative Design with Border Separator

Create a split button with a more pronounced visual separation −

<!DOCTYPE html>
<html>
<head>
<style>
    .split-button-alt {
        display: inline-flex;
        border: 2px solid #28a745;
        border-radius: 6px;
        overflow: hidden;
    }
    
    .main-btn-alt {
        background-color: #28a745;
        color: white;
        padding: 15px 25px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        outline: none;
    }
    
    .dropdown-alt {
        position: relative;
        display: inline-block;
    }
    
    .dropdown-btn-alt {
        background-color: #28a745;
        color: white;
        padding: 15px 20px;
        font-size: 14px;
        border: none;
        border-left: 2px solid #1e7e34;
        cursor: pointer;
        outline: none;
    }
    
    .dropdown-content-alt {
        display: none;
        position: absolute;
        background-color: white;
        min-width: 180px;
        box-shadow: 0px 8px 24px rgba(0,0,0,0.15);
        z-index: 1;
        border-radius: 6px;
        top: 100%;
        right: 0;
        margin-top: 5px;
        border: 1px solid #ddd;
    }
    
    .dropdown-content-alt a {
        color: #333;
        padding: 14px 18px;
        text-decoration: none;
        display: block;
        transition: background-color 0.2s;
    }
    
    .dropdown-content-alt a:hover {
        background-color: #28a745;
        color: white;
    }
    
    .dropdown-alt:hover .dropdown-content-alt {
        display: block;
    }
    
    .main-btn-alt:hover, .dropdown-btn-alt:hover {
        background-color: #1e7e34;
    }
</style>
</head>
<body>
    <div class="split-button-alt">
        <button class="main-btn-alt">Create New</button>
        <div class="dropdown-alt">
            <button class="dropdown-btn-alt">?</button>
            <div class="dropdown-content-alt">
                <a href="#">New Document</a>
                <a href="#">New Folder</a>
                <a href="#">New Presentation</a>
            </div>
        </div>
    </div>
</body>
</html>

A green split button with a border separator appears. The main button says "Create New" and the dropdown arrow shows three creation options when hovered.

Key Points

  • Use display: inline-flex to align buttons horizontally
  • Apply different border-radius values to create seamless corners
  • Use position: relative on the dropdown container and position: absolute on the dropdown content
  • Set z-index to ensure dropdown appears above other elements

Conclusion

Split button dropdowns provide an efficient way to offer primary and secondary actions in a compact interface. Use flexbox for alignment and hover states to reveal dropdown options for better user experience.

Updated on: 2026-03-15T14:30:35+05:30

1K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements