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: Kerixa Inc. -->
<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>
<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><a target='_blank' href='http://www.javascriptfreecode.com/' style='font-size: 8pt; text-decoration: none'>JavaScript Codes</a>

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

Javascript Best Codes

Javascript Code: 3D Navbar

Review

Links