Tutorial: Menú hover 2

Copiar el código y pegarlo en un gadget HTML/Javascript
<style>
@font-face { font-family:yow !important; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important; }

a.navi {
border:1px solid #ebebeb; 
text-transform:uppercase; 
background:#fff; 
text-decoration:none; 
color: #666;
 padding: 6px; 
font: 8px yow; 
margin-left: 5px; 
margin-right: 5px; 
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; text-decoration:none; 
box-shadow:inset 0px 0px 0px #FBF8E0,
inset 0px 0px 0px #FBF8E0; 
display: inline-block; 
width: 65px;
}
a.navi:hover {
-webkit-transition-duration: 0.5s; 
box-shadow:inset 0px 14px 0px #938B54,inset 0px -14px 0px #938B54; color: #fff;
}
</style>
<center>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
</center>
Editar lo marcado

5 comentarios:

  1. No sabes lo difícil que me lo has puesto, ahora no sé por cual decidir :(

    ResponderEliminar
  2. este menú me gusta, seguramente lo use ^u^
    saluditos!!! >w<

    ResponderEliminar
  3. Hola, ¿como hago para cambiarle el tipo de letra?

    ResponderEliminar
    Respuestas
    1. Hola, si quieres poner una fuente (tipo de letra) básica elimina:
      | @font-face { font-family:yow !important; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important; } |

      y luego debajo de
      | padding: 6px; |

      pegas lo siguiente:
      font-family: 'Calibri';

      (calibri es un ejemplo de tipografía de letra, tu cambiala por la que quieras)

      Si quieres un tipo de letra por url, simplemente cambia el url del primer código que mencioné recién

      bonus: para cambiar el tamaño o el estilo, debajo de
      | padding: 6px; |
      hay un código que dice
      | font: 8px yow; |
      editas los px que quieres y el estilo de letra que en este caso es 'yow'

      Eliminar

¡Gracias por tu comentario!

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

Simbolos:
♡♥♫△☆ღ