Menú Cute

Home Afiliados Tutoriales Recursos Otros

Pegar en un gadget HTML

<style>

nav a {

 position: relative;

 display: inline-block;

 margin: 5px 5px;

 outline: none;

 color: #fff;/* Color del texto*/

 text-decoration: none;

 font-style: italic;

 font-family: georgia;

 letter-spacing: 2px;

 font-weight: 400;

 text-shadow: 0 0 1px rgba(255,255,255,0.3);

 font-size: 1.35em;

}

nav a:hover,

nav a:focus {

 outline: none;

}

.menu10 a {

 line-height: 2em;

 -webkit-perspective: 800px;

 -moz-perspective: 800px;

 perspective: 800px;

}

.menu10 a span {

 position: relative;

 display: inline-block;

 padding: 3px 15px 0;

 background:url(http://24.media.tumblr.com/tumblr_md47p4NYAg1rijbyfo1_500.jpg);/* Fondo del menu*/

 box-shadow: inset 0 3px #B482D0;/* Borde superior del menu*/

 -webkit-transition: background 0.6s;

 -moz-transition: background 0.6s;

 transition: background 0.6s;

 -webkit-transform-origin: 50% 0;

 -moz-transform-origin: 50% 0;

}

.menu10 a span::before {

 position: absolute;

 top: 0;

 left: 0;

 width: 100%;

 height: 100%;

        background: #B482D0;/* Fondo del menu cuando pasa el cursor*/

        color: #000;/* Color del texto cuando pasa el cursor*/

 content: attr(data-hover);

 -webkit-transform: rotateX(270deg);

 -moz-transform: rotateX(270deg);

 -webkit-transition: -webkit-transform 0.6s;

 -moz-transition: -moz-transform 0.6s;

 transition: transform 0.6s;

 -webkit-transform-origin: 0 0;

 -moz-transform-origin: 0 0;

 transform-origin: 0 0;

 pointer-events: none;

}

.menu10 a:hover span::before,

.menu10 a:focus span::before {

 -webkit-transform: rotateX(10deg);  -moz-transform: rotateX(10deg);

 transform: rotateX(10deg);

}

</style>

<center><nav class="menu10">

 <a href="Url del la pagina"><span data-hover="Home">Home</span></a>

 <a href="Url del la pagina"><span data-hover="Afiliados">Afiliados</span></a>

 <a href="Url del la pagina"><span data-hover="Tutoriales">Tutoriales</span></a>

 <a href="Url del la pagina"><span data-hover="Recursos">Recursos</span></a>

 <a href="Url del la pagina"><span data-hover="Otros">Otros</span></a>

</nav>

</center>