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:

split button bootstrap

See online demo and code

The code:

  • 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:

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:

split buttons multiple

See online demo and code

Here is the button’s markup:

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.

split buttons CSS

See online demo and code

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