3D icon Menu

3D Icon Menu 

<style>
#bloghelpmenu
a {
 position: relative;
 color: rgba(255,255,255,1);
 text-decoration: none;
 background-color: rgba(419,87,5,1);
 font-family: 'arial';
 font-weight: 700;
 display: block;
 padding: 4px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 margin: 100px auto;
 text-align: center;
 
 -webkit-transition: all .1s ease;
 -moz-transition: all .1s ease;
 -ms-transition: all .1s ease;
 -o-transition: all .1s ease;
 transition: all .1s ease;
}

#bloghelpmenu
a:active {
 -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
 -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
 box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
 position: relative;
 top: 6px;
}

</style>


<style>
#bloghelpmenu {
 float: left;
}
#bloghelpmenu span {
 display: block;
}
#bloghelpmenu ul {
 margin: 0;
 float:left;
 position:relative;
 top:0
}
#bloghelpmenu ul > li {
 margin: 0 0 0 1px;
 float:left;
 list-style:none;
}
#bloghelpmenu ul > li > a {
 display: block;
 height: 100px;
 width: 100px;
 text-align: center;
 color: #ffffff;
 border-radius: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 text-decoration:none;
}
#bloghelpmenu ul > li > a:hover, #bloghelpmenu ul > li > a:focus {
 padding-top:15px;
 -webkit-transition:.1s linear;
 transition:.1s linear 
}
.nav-icon {
 display: block;
 padding-top: 15px;
 vertical-align: top;
 height: 50px;
 line-height: 50px;
 text-align: center;
 font-size: 30px!important;
 line-height: 25px !important;
}
#bloghelpmenu ul li a .nav-text {
 font-size: 16px;
 line-height: 15px;
 text-transform: uppercase;
}

</style>

<!-- this is HTML -->

<nav id="bloghelpmenu">
<ul>
<li style="background-color: transparent">
 <a href="###"><div class="nav-icon">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTpjMDxJGK6JdFa6cRVAeCc4f6_3eMpllGD59dvCBv9RD93n-oM7iNUvFFX9EjO1gezTb-HCKcrz3mCboWZ2Jqi2ZueDPbj3J2A7UkcIe9W0anxwjJ85VmrfK-IHPY8Et0XbWzwOjNp2ie/s512/ahome.png" width="55px" height="55px" />
</div>
<div class="nav-text">Home</div>
</a>
</li>
<li style="background-color: transparent">
<a href="###" >
<div class="nav-icon">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkLQ5xpy2do0ftTqfFTzxox6_8OqAPH8TB56ElURwc85xRLFgkHD3GqnjUGNA9V0m-HOzduNFr9pcohXIhb3sMrP1RefdZ68FUt2-JrWzvUaUxx8Lp_oHRLrkva-OSODJu0GVhYhqy5Or/s512/aicon.png" width="55px" height="55px" />
</div>
<div class="nav-text">TOOLS</div>
</a>
</li> 
<li style="background-color: transparent">
<a href="###">
<div class="nav-icon">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3tj2HIVnN67_5eIMYzv4mrzMwhoJP99fdL2dfx8kDJ4BIvzf_EBxAAfMtg8gLIj51tvkWkKHQFxbAcfOBEXO5NefdR4yB9yCikTV7IkPFH1CRLlYhSSUZAK8t23R611NzBF4KjZ8FLIRw/s512/amobile.gif" width="55px" height="55px" />
</div>
<div class="nav-text">CALL ME</div>
</a>
</li>
<li style="background-color: transparent"><a href="###">
<div class="nav-icon">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnPEufmLe6e-GiijNV7be5Pznz4as8Ru-hTCfxRy-TzP3T_wC55QBgo4SrLeEePeW8mfqpZnxcnSXzx0jiJVwX3zuH_135MbXgwHgREGhRw9aP3vgExFKoSfoJ8QY8uYFL2RBiQWo947na/s512/afacebook-icon.png" width="55px" height="55px" />
</div>
<div class="nav-text">FACEBOOK</div>
</a>
</li>
<li style="background-color: transparent">
<a href="###">
 <div class="nav-icon">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzPLhzGI4xiRUkt6GLs-4W0C7Lb8J3B23Ftj1c5QbKEkgiU_jiiDaCkCpdPkZynSW0YeaLloWmBjcGQgFNtIqbkkX-UzGC7Cwu_6ZUUU84I71rITrUOb-wT8-T2c5gOfiFc0kc9k-hPK2W/s256/aicon-symbols.png" width="55px" height="55px" />
</div>
<div class="nav-text">Blog</div>
</a>
</li>
<li style="background-color: transparent">
<a href="###">
<div class="nav-icon">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJHAp125syyMNsC5pFt03uZ7f4ZQnfbNtTgz7HNml5XFY02kHw9FroigPyw_TiyAqNVuR32dtjN5qTXhR4gAhlg6Soys1EXzQi5UCwSf8dGBlaCmZHnPcgG-zzSa_mILIIgYAGKu6sn0vk/s512/aemail-icon.png" width="55px" height="55px" />
</div>
<div class='nav-text'>Contact</div>
</a>
</li>
</ul>
</nav>

***εννοείται οτι όπου  ### θα βάλετε τη διεύθυνση url
***αλλάξτε και τα εικονίδια με δικά σας…(το μέγεθος αφήστε το ίδιο)
Δείτε και το demo που σας έχω, και αν το προσπαθήσετε…ΚΑΛΗ ΕΠΙΤΥΧΙΑ !