What is a split button for?

A split button has two components; one is the label and the other is an arrow. The purpose of the arrow is opening a dropdown with the set of actions. Whereas clicking on the label takes to the default action.

In this tutorial, I will show you creating the Split buttons by using custom CSS, JavaScript, and HTML. Along with this, you will see creating the buttons by frameworks like Bootstrap.

Note: See the last example for the pure CSS/HTML split button.

An example of a Bootstrap split button

Before I show you the example of creating a split button by your own CSS/HTML, let me show you an example of a split button by using the Bootstrap 4 framework.

So, if you are already using Bootstrap 4 for your project then creating a split button is pretty simple and requires referencing the same files as you might already be using.

First, have a look and I will explain how it is created:

See online demo and code

The code:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>Split button by Bootstrap 4</h3>

<span class="sr-only">Toggle</span>

</button>

<a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4 Tutorials</a>

<a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery Tutorials</a>

<a class="dropdown-item" href="https://www.jquery-az.com/html-tutorials/">HTML Tutorials</a>

<a class="dropdown-item" href="https://www.jquery-az.com/css-tutorials/">CSS Tutorials</a>

</div>

</body>

</html>

In the code, you can see a main <div> element is created with the .btn-group class.
Inside that div, two button tags are used.
The first button with “Home” text is given the .btn and .btn-info. You may use the desired contextual class for the “label” button.
In the second button, you may see a number of classes are used along with data attributes:

1	<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

Also notice the <span> tag.

Another <div> tag is used inside the main div and there we created the dropdown links or menu items.

You may learn more about the Bootstrap 4 buttons here.

For dropdown details, go to this tutorial: Dropdowns in Bootstrap 4. There, you may also learn how to create the link based dropdowns.

Did you know? The usage of the split buttons is for presenting the users with several related tools or options and one of those options is used frequently.

The demo of other split button styles using Bootstrap

Similarly, you may create many different styles of split buttons by using the Bootstrap framework. The demo below shows using various button combinations, particularly look at the solid button with the outline button style. These make really good combinations:

See online demo and code

Here is the button’s markup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201

<div class="btn-group">

<button type="button" class="btn btn-outline-danger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All Tutorials</button>

<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

<div class="dropdown-menu" aria-labelledby="btnDropdownDemo">

    <a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a>

    <a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery</a>

    <a class="dropdown-item" href="https://www.jquery-az.com/html-tutorials/">HTML</a>

    <a class="dropdown-item" href="https://www.jquery-az.com/css-tutorials/">CSS</a>

</div>

</div>

<div class="btn-group">

<button type="button" class="btn btn-danger">All Tutorials</button>

<button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-success">All Tutorials</button>

<button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

<br /><br />

<div class="btn-group">

<button type="button" class="btn btn-dark">All Tutorials</button>

<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-outline-warning">All Tutorials</button>

<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-outline-secondary">All Tutorials</button>

<button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

<br /><br />

<div class="btn-group">

<button type="button" class="btn btn-primary">All Tutorials</button>

<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-success">All Tutorials</button>

<button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-info">All Tutorials</button>

<button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

<br /><br />

<div class="btn-group">

<button type="button" class="btn btn-warning">All Tutorials</button>

<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-outline-danger">All Tutorials</button>

<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-light">All Tutorials</button>

<button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="sr-only">Toggle</span>

</button>

</div>

</div>

You may grab the complete code from the demo page.
How to create a pure CSS/HTML based split button

If your project is not based on the Bootstrap framework then this is unlikely that you would want using the dependent libraries only for the split buttons in your web pages.
In such a case, you may want a solution based on the CSS/HTML only or a little JavaScript only for the purpose of split button.
The example below is a solution based on HTML and CSS only.

See online demo and code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

.button-cls {

background-color: #DC3545;

color: white;

padding: 16px;

font-size: 16px;

border: none;

outline: none;

}

.button-cls-split {

color: #dc3545;

border-color: #dc3545;

background-color:#fff;

padding: 15px;

font-size: 16px;

border: 1px solid #dc3545;

}

.dd-cls {

position: absolute;

display: inline-block;

}

.dd-cls:hover .dd-cont-cls {

display: block;

}

.button-cls:hover, .dd-cls:hover .button-cls {

background-color: #A51D2B;

}

.dd-cont-cls {

display: none;

position: absolute;

background-color: #F9DBDE;

min-width: 160px;

z-index: 1;

}

.dd-cont-cls a {

color: #A51D2B;

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dd-cont-cls a:hover {

    background-color: #A51D2B;

    color:#fff;



    }

</style>

</head>

<body>

<button class="button-cls">Tutorials Home</button>

<div class="dd-cls">

<button class="button-cls-split">

        <i class="fa fa-angle-double-down"></i>

</button>

<div class="dd-cont-cls">

    <a href="#">jQuery Tutorials</a>

    <a href="#">Bootstrap Tutorials</a>

    <a href="#">PHP Tutorials</a>

    <a href="#">Java Tutorials</a>

    <a href="#">Python Tutorials</a>

</div>

</div>

</body>

</html>

You may get the complete code with output on the demo page.

Related Tutorials:

The Dropdown in Bootstrap 4

The button styles in Bootstrap 4

12 Examples to Learn Using Bootstrap 5 Dropdown

Bootstrap button – 9 demos of custom color, size, dropdown, navbar and more

How to Create Button Groups in Bootstrap 5

Bootstrap 5 Progress – Simple, Striped, Animated and More

7 customized Bootstrap dropdown demos in menus, navbar and tabs

What is Bootstrap 4 navbar menu component

How to use icons in Bootstrap projects?

CSS based tooltips over social icons: Code and live demo