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.
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>
.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>
.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;
}
.mybtn1 {
display: flex;
position: relative;
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;
}
.mybtn1:hover .dropdownlist {
display: flex;
flex-direction: column;
}
.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%;
margin-left: 10px;
}
.dropdownlist a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdownlist a:hover {
background-color: rgb(162, 220, 162);
}
Output:
Similar Reads
How to Style a Dropdown Using CSS? To style a dropdown using CSS means customizing how a <select> element and its options appear—such as changing the width, background, font, border, or hover effects. You can style dropdowns using basic CSS properties or enhance them further with pseudo-classes like :hover and :focus, and even
3 min read
How To Create A Dropup Menu Using CSS? A Dropup menu is a type of menu in web design that expands upwards from its trigger element instead of the traditional dropdown direction. Dropup menus are often used in contexts such as navigation bars, form selections, and interactive elements.Below are the approaches used for creating the dropup
6 min read
Create a Button Group using HTML and CSS This article will show you how to create a Button Group with the help of HTML and CSS. To create the Button Group, first, we create buttons using the HTML <button> element and then apply some CSS styles to make all buttons in a group. First, we create a div container with the class name .butto
2 min read
How to create a split navigation bar using CSS ? The article will demonstrate how to create a split navigation bar using CSS. There are two ways to make the split navigation bar these are with the help of flexbox properties and CSS position property. A split navigation bar is a popular layout where navigation links are divided into two sections. I
4 min read
How To Create a More Button in a Navigation Bar using CSS? Adding a More button in a navigation bar is used to handle overflow items when there is insufficient space to display all navigation links. We will explore how to implement a More button using CSS. ApproachCreate a web page structure using the <nav> element, which contains list items for each
2 min read
How to Create a Dropdown Menu with CSS & JavaScript ? A dropdown menu is a common user interface element that allows users to select from a list of options. It is often used in navigation bars or forms to conserve space and provide a clean user experience. Creating a dropdown menu involves a combination of CSS for styling and JavaScript for interactivi
3 min read