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
<!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 =
</ 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 >
|
.box 1 {
height : 100 vh;
display : flex;
justify- content : center ;
align-items: center ;
flex- direction : column;
} h 1 {
color : green ;
text-align : center ;
} h 3 {
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 todisplay: 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.
<!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 =
</ 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 >
|
.box 1 {
height : 100 vh;
display : flex;
justify- content : center ;
align-items: center ;
flex- direction : column;
} h 1 {
color : green ;
text-align : center ;
} h 3 {
color : blueviolet;
font-size : 25px ;
text-align : center ;
} .mybtn 1 {
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 ;
} .mybtn 1: 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: