3D Navbar

Written by @kerixa 6 May 2020

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.

Code Snippet:

                                                
                                                <!-- this script is provided by 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='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Shahmeer, coolcoco7, SmitaPatil25, owoboycute, 092010
advertisement 2