Tutorial: Menú hover


<style>
@font-face {
font-family:tt;
src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.menul{ padding:3px;
width:65px;
margin-left: 5px;
margin-right: 5px;
font:8px tt;
color:#e1c9f3;
background:#fff;
text-align:center;
float:center;
-webkit-transition-duration: .50s;
display: inline-block;
padding:5px;
border:3px solid #e1c9f3;}
.menul:hover {
padding:3px;
height:auto; auto;
margin-left: 5px;
margin-right: 5px;
font:8px tt;
color:#fff;
background:#9C7FB4;
text-align:center;
-webkit-transform: scale(0.8) rotate(20deg);
border:3px solid #fff;
padding:5px;}
</style>
<center>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
</center>
</div>
Editamos:
Rojo: Link al abrir una categoría
Naranja: Categoría
Azul: Colores
Busca los colores que te agraden en: HTML COLORES

2 comentarios:

  1. Pobres letras, se deben marear :(
    Tenés una gran variedad de menús.
    Agradecido estoy :)

    ResponderEliminar
  2. me encanto este tuto se agradece!!1

    ResponderEliminar

¡Gracias por tu comentario!

Emojis:
⸜(。˃ ᵕ ˂ )⸝♡ | ૮ ˶ᵔ ᵕ ᵔ˶ ა | (>▽<) | ପ(๑•ᴗ•๑)ଓ ♡ | (╯ω╰) | (☆▽☆) | (≧ω≦) | ૮ • ﻌ - ა | ଘ(੭ˊᵕˋ)੭ | (・∀・ ) | (¬_¬) | (ノ◕ヮ◕)ノ*:・゚✧ | ฅ^•ﻌ•^ฅ | (¬‿¬) | (─‿‿─) | (~ ̄▽ ̄)~ | (︶ω︶) | ٩(ˊᗜˋ*)و ♡ | (╥﹏╥) | (✿ ♥‿♥) | ●ᴥ●

Simbolos:
♡♥♫△☆ღ