How TO - Side Navigation Buttons
Learn how to create hoverable side navigation buttons with CSS.
How To Create a Hoverable Sidenav
Step 1) Add HTML:
Example
  <div id="mySidenav" class="sidenav">
  <a href="#" 
  id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a 
  href="#" id="projects">Projects</a>
  <a href="#" 
  id="contact">Contact</a>
</div>
Step 2) Add CSS:
Example
  /* Style the links inside the sidenav */
#mySidenav a {
  position: absolute; 
  /* Position them relative to the browser window */
  left: -80px; 
  /* Position them outside of the screen */
  transition: 0.3s; 
  /* Add transition on hover */
  padding: 15px; /* 15px 
  padding */
  width: 100px; /* Set a specific width */
  text-decoration: none; 
  /* Remove underline */
   
  font-size: 20px; /* Increase font size */
  color: white; 
  /* White text color */
  border-radius: 0 5px 5px 0; /* 
  Rounded corners on the top right and bottom right side */
}
#mySidenav 
  a:hover {
  left: 0; /* On mouse-over, make the elements 
  appear as they should */
}
/* The about link: 20px from the top with 
  a green background */
#about {
  top: 20px;
    background-color: #4CAF50;
}
#blog {
  top: 80px;
    background-color: #2196F3; /* Blue */
}
#projects {
  top: 140px;
   
  background-color: #f44336; /* Red */
}
#contact {
  top: 200px;
    background-color: #555 /* Light Black */
}
Try it Yourself »
Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

