It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 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.
<!-- 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>