In this post, we will learn how to create a split button dropdown with CSS. If you want to create a split button with dropdown facility. So how we can create this, we will learn in this post.


How To Create A Split Button Dropdown With CSS ?


Create A Split Button Dropdown

To create a split button dropdown, first we create two buttons. Second button is used for dropdown menu. After that we use CSS to style these buttons. 


Complete code for split button dropdown is here:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Create A Split Button Dropdown With CSS ?</title>
<style>

/* Style button element*/
button {
background-color: #888;
color: white;
padding: 16px;
font-size: 16px;
border: none;
outline: none;
}

/* Adjust dropdown button position*/
.dropdown {
position: absolute;
display: inline-block;
}

/* Hide dropdown menu */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: auto;
z-index: 1;
}

/* Style dropdown links */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
display: block;
}

button:hover, .dropdown:hover button {
background-color: #000;
}

</style>
</head>
<body>

<button>Split Button</button>

<div class="dropdown">

<!-- border left for split button -->
<button style="border-left:1px solid #444">

<!-- HTML code for down arrow symbol -->
&#x25BC;
</button>

<div class="dropdown-content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
</div>

</div>

</body>
</html> code-box



Summary

In this post we learned how to create a split button dropdown with CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post