<!-- 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>