PUBLISHED ON: AUGUST 25, 2021
How to create more button with CSS
The more button is used in the navbar to add additional links of the pages. The more button is simply a dropdown menu with links. The content within it can be shown on hover or click. It is widely used on webpage.
In this tutorial, we will learn to create more buttons with CSS.
Creating a "more" button
The "more" button can be used to toggle the list of links within the navbar. To do so use <div> container and add a list of links which will be toggled with more <button>.
- Use
position:absolute to the more menu and position:relative to more content so that more-content is placed below the button.
- Use
box-shadow property to customize more -content like a card.
- Use
:hover class to open show the menu when the user places the mouse over it.
- The more-content is hidden by default using
display:none.
Example: Create a more buttons to toggle links
In this example, we have added more buttons to the navbar to toggle the links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
overflow: hidden;
background-color: cyan;
}
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.active {
background-color: #04AA6D;
color: white;
}
.navbar .icon {
display: none;
}
.more {
float: left;
overflow: hidden;
}
.more .btn {
font-size: 20px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.more-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.more-menu a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover, .more:hover .btn {
background-color: #555555;
color: white;
}
.dropdown-menu a:hover {
background-color: #cccccc;
color: black;
}
.more:hover .more-menu {
display: block;
}
</style>
</head>
<body>
<div class="navbar" id="nav">
<a href="#" class="active">Home</a>
<a href="#">course</a>
<a href="#">study</a>
<div class="more">
<button class="btn">More
<i class="fa fa-caret-down"></i>
</button>
<div class="more-menu">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</body>
</html>
Output
Here is the output of the above example.
Example: Creating a more buttons with CSS
In the next example, we will add more buttons to a vertical menu.
Conclusion
In this tutorial, we have learned to create more buttons. We have added a more button to the navbar with dropdown contents within it. It has been added to a horizontal navbar and vertical navbar.
