[Tutorial]:Como hacer y personalizar tu propio menú

¡¡Hola! ya se que e slo que mas pondre en el blog gracias a dayi y Soudy bueno, os traigo este tuto primero que NADA créditos por el código(No por el tutorial) a:Not a Single Song Empezemos...

Código:
<style>
.menu a{
display: inline-block; /* Formato del menú */
font-family: Trebuchet MS; /* Fuente*/
padding: 10px;
color: #fff;
border-radius: 4px;  /* Bordes redondeados */ 
margin: 2px;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
background-image: url(http://i47.tinypic.com/2cfvzwo.jpg); /* Imagen de fondo */ 
}
.menu a:hover { /* Para cuando pasas el cursor por encima */ 
background: #ff78a1; /* Color de fondo, pueden cambiarlo por el de arriba y que sea una imagen */ 
color: #fff; /*Color de la letra*/
border-radius:3px; /* Bordes redondeados */ 
}
</style>
<center>
<div class="menu"><a href="http://www.blogger.com/" >Refresh</a> <a href="http://www.blogger.com/" >Link1</a> <a href="http://www.blogger.com/" >Link2</a> <a href="http://www.blogger.com/" >Link3</a> <a href="http://www.blogger.com/" >Link4</a> <a href="http://www.blogger.com/" >Link5</a> <a href="http://www.blogger.com/" >Link6</a>
</div>
</center> 
Nota: Los colores se guian por código osea estos:

Primer paso:

Segundo paso y ultimo paso:



















Espero que le aya gustado el tuto si les gusto comenten:D me harián más que feliz x3 bye!!! ahorita pongo imagenes divertidas=)