Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

3/30/2013

Menu hover com Borda

Oi gente , eu adaptei esse menu hover  e coloquei um efeito bem legal , veja o exemplo e confira o tutorial:
1 - Vá em Modelo > Editar HTML e procure por ]]</b:skin> e cole esse código antes:


menu  {
font-family: Verdana; 
letter-spacing: 2px; 
font-size: 10px; 
line-height: 13px; 
display: 
inline-block; 
background:#F3F3F3; 
color:#000; 
width: auto; 
padding: 5px; 
margin: 1px; 
text-align: center; 
text-transform: uppercase;
border-bottom: 2px solid #FF99CC;
 -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
}

menu:hover {
font-family:Verdana; 
letter-spacing: 2px; 
font-size: 10px; 
line-height: 13px; 
display: inline-block; 
background:  #000; 
color:#fff; 
width: auto; 
padding: 5px; 
margin: 1px; 
text-align: center; 
text-transform: uppercase; 
border-bottom: 5px solid #00CCFF;
 -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
}
Edite como quiser e cole esse código onde quer que apareça 
<a href="LINK"  title="TITULO"><menu>NOME</menu>

Créditos do Código : http://adgajsdgasygdsia.tumblr.com/
Créditos pelo Tutorial e Adaptação : Sugoi Tutoriais

Um comentário:

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.