How to create a Split Button Dropdown using CSS ?

Last Updated : 28 Apr, 2025

In this article, we will learn how to design a split button dropdown using CSS. Split buttons combine a main button with a dropdown, useful for adding interactive features to your website. This guide helps you improve your web design skills by showing you how to make a split button in easy steps.

Table of Content

Using CSS Properties & Pseudo-class
Using Flexbox Properties

Using CSS Properties & Pseudo-class

This approach uses CSS properties and pseudo-classes to create a split button dropdown, enhancing user interaction and design by combining style elements and interactive features within a single-button interface.

Approach

Make a structure of the web page using <h1>, <h3>, <div>, <span> and <button> elements. Link the external stylesheet to the HTML file.
The element with the class name .box is styled to be a relatively positioned inline block. This styling creates a container for both the split button and the dropdown list.
The dropdown list is initially hidden by setting the property display: none; and positioned absolutely below the split button it becomes visible only when the box is being hovered.
Styling the <h1> element with the color property set to green. Additionally, the <h3> element is styled with properties such as color (blueviolet), font-size (25px), and text-align (center).

Example: The code example shows how to create a split button dropdown using CSS pseudo-elements

HTML

<!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>
    <link rel="stylesheet"
          href="style.css">
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
    <div class="box1">
        <div class="innerbox">
            <h1>GeeksforGeeks</h1>
            <h3>A split buttondropdown using CSS</h3>
            <div class="box">
                <button class="mybtn">
                    Split Button
                    <span>
                        <i class="fa fa-solid fa-caret-down"></i>
                    </span>
                </button>
                <div class="dropdownlist">
                    <a href="#">DSA</a>
                    <a href="#">MERN</a>
                    <a href="#">MEAN</a>
                    <a href="#">MEVN</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS

.box1 {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

h1 {
    color: green;
    text-align: center;
}

h3 {
    color: blueviolet;
    font-size: 25px;
    text-align: center;
}

.box {
    position: relative;
    display: inline-block;
    margin-left: 120px;
}

.mybtn {
    background-color: #4CAF50;
    color: rgb(243, 251, 243);
    font-size: 20px;
    font-weight: 700;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

i {
    margin-left: 5px;
}

.box:hover .dropdownlist {
    display: block;
}

.dropdownlist {
    display: none;
    position: absolute;
    background-color: #deedd4;
    font-weight: 700;
    min-width: 140px;
    box-shadow: 0 16px 16px rgba(13, 12, 12, 0.2);
    top: 100%;
}

.dropdownlist a {
    color: rgb(26, 24, 24);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdownlist a:hover {
    background-color: rgb(162, 220, 162);
}

Output:

Using Flexbox Properties

In this approach we will use the CSS flex properties to create a responsive and visually appealing layout. The flex container arrangement facilitates easy alignment and positioning of the dropdown elements within the button structure.

Approach

Make a structure of the web page using <h1>, <h3>, <div>, <span> and <button> elements. Link the external stylesheet to the HTML file.
The .mybtn1 class is a flex container that holds both the split button and the dropdown list. It's set to display: flex. The overall page structure is centered vertically and horizontally using flexbox properties on the .box1 class.
The dropdown list is initially hidden (display: none;) and positioned absolutely below the split button. Links inside the dropdown list have styling properties for color, padding, and display.
Styling the <h1> element with the color property set to green. Additionally, the <h3> element is styled with properties such as color (blueviolet), font-size (25px), and text-align (center).

Example: The code example shows how to create a split button dropdown using CSS flexbox properties.

HTML

<!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>
    <link rel="stylesheet" 
          href="style.css">
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
    <div class="box1">
        <div class="innerbox">
            <h1>GeeksforGeeks</h1>
            <h3>A split button
                dropdown using Flexbox
            </h3>
            <div class="mybtn1">
                <button class="mybtn">
                    Split Button
                    <span class="dropdown-symbol">
                        <i class="fa fa-solid fa-caret-down"></i>
                    </span>
                </button>
                <div class="dropdownlist">
                    <a href="#">Course</a>
                    <a href="#">MERN</a>
                    <a href="#">MEAN</a>
                    <a href="#">MEVN</a>
                    <a href="#">DSA</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>