Tutorial: 2 Menús {Menú Buttons y Menú Calendar Style}

Hola! Hoy traigo un tutorial después de que me encariñé con los recursos y ediciones xD este nuevo photoshop me encanta! creo que pronto subiré un tutorial sobre como descargar el último, aun que tengo que decirles que pesa muchísimo y requiere un sistema operativo mayor al Windows XP. Bueno, espero disfruten estos menús.

Menú Buttons:

Gracias a Lunany Kawaii por la imagen :D

1. Vamos a Diseño > HTML/Javascript
2. Pegamos el siguiente código:

<style>
.men3a:hover {
box-shadow: 0 4px #7ED1A9;/*Color de la Sombra de la inferior al pasar el cursor*/
top: 2px;
}
.men3a {
border-radius: 10px 10px 10px 10px;/*Redondeo de los bordes del Menu*/
}
.men3 {
background: #A9E2C7;/*Fondo del Menu*/
color: #fff;/*Color de la letra*/
box-shadow: 0 6px #7ED1A9;/*Color de la Sombra del menu de la parte inferior*/
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.box {
border: none;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 8px 15px;/*Tamaño y altura del menu, 8 es el ancho y 15 es la altura*/
display: inline-block;
margin: 5px 5px;/*Espacios entre los menus*/
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
</style>
<div class="box men3 men3a"><a href="Url de la pagina">Nombre de la pagina</a></div>
<div class="box men3 men3a"><a href="Url de la pagina">Nombre de la pagina</a></div>
<div class="box men3 men3a"><a href="Url de la pagina">Nombre de la pagina</a></div>
<div class="box men3 men3a"><a href="Url de la pagina">Nombre de la pagina</a></div>

• Editamos, guardamos y listo.

Menú Calendar Style:

Gracias a Lunany Kawaii por la imagen :D

1. Vamos a Diseño > HTML/Javascript
2. Pegamos el siguiente código:

<style>
nav a {
position: relative;
display: inline-block;
margin: 5px 5px;
outline: none;
color: #fff;/* Color del texto*/
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
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: #FDBDBD;/* Fondo del menu*/
box-shadow: inset 0 3px #FDEDB8;/* 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: #FFE6BE;/* Fondo del menu cuando pasa el cursor*/
color: #BB9952;/* 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 de la pagina"><span data-hover="Nombre de la Pagina">Nombre de la Pagina</span></a>
<a href="Url de la pagina"><span data-hover="Nombre de la Pagina">Nombre de la Pagina</span></a>
<a href="Url de la pagina"><span data-hover="Nombre de la Pagina">Nombre de la Pagina</span></a>
<a href="Url de la pagina"><span data-hover="Nombre de la Pagina">Nombre de la Pagina</span></a>
<a href="Url de la pagina"><span data-hover="Nombre de la Pagina">Nombre de la Pagina</span></a>
</nav>
</center>

• Y si quieres añadir otro enlace más , pon el siguiente código después de </a> :

<a href="Url de la pagina"><span data-hover="Nombre de la Pagina">Nombre de la Pagina</span></a>

• Editamos, guardamos y listo. 

Espero les haya gustado este tutorial, les aviso que voy a estar actualizando tutoriales y recursos, algunos los borraré o editaré. Nos leemos ^^