Javascript Code: 3D Navbar

Putting some buttons to navigate users in your website is very essential. However, simple buttons might not be as attractive as those with effects. Below is some 3D navigation buttons which makes your navbar wonderful.

<!-- this script got from www.javascriptfreecode.com - Coded by: Krishna Eydat -->

<head>
<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.stage{
  height: 350px;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}
.p{
  font-size: 35px;
  text-align: center;
  margin-top: 0;
  cursor: pointer;
  width: 100%;
  background: #78FED6;
  border-radius: 10px;
  font-family: Century Gothic;
  letter-spacing: 5px;
}
.div{
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  width: 200px;
  height: 40px;
  margin-top: 4%;
 transition-duration: 0.2s;

}
.p:hover{
  background: white;
  color: black;
}
.div:nth-child(odd){
  transform: perspective(300px) rotateY(45deg);
  box-shadow: -2px 2px 7px gray;
}
.div:nth-child(even){
  transform: perspective(300px) rotateY(-45deg);
    box-shadow: 2px 2px 7px gray;
}
.div:hover{
  transform: rotateY(0);
  background: white;
  color: black;
  box-shadow: 0px 0px 0px;
}
</style>
</head>
<body>
<section class="stage">
  <div id="home" class="div"><p id="homep" class="p">Home</p></div>
  <div class="div" id="about"><p class="p">About</p>
  </div>
  <div class="div" id="contact"><p class="p">Gallery</p>
  </div>
  <div class="div" id="gallery"><p class="p">Contact</p>
  </div>
</section>

</body><a target="_blank" href="https://www.javascriptfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">Javascript Free Code</a>

If you don't know how to use this code or need more information Click here!

Javascript Best Codes

Javascript Code: 3D Navbar

Links