Signup/Sign In
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.

more button

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.



About the author: