11 de fev de 2013

Menu miau - Tutorial

Olá meus amores !!! Hoje vou ensinar para vocês a fazer um menu incrível que tem um efeito hover ao passar o mouse por cima dele como mostra na ilustração abaixo :

• Vamos aprender a faze-lo ???


 Primeiramente abra o HTML de seu Blog, dê um ctrl + F e procure por ]]></b:skin> ... 
Após ter achado, cole o código abaixo ANTES de ]]></b:skin>


miau {
background: #f8f8f8;
color: #ffa9d6;
border: 1px solid #ffa9d6;
display:inline;
padding: 6px;
margin: 2px;
font-family: tahoma;
font-size: 11px;
text-align: center;
width: 20%;
float: center;
-webkit-transition-duration: .50s;
}
miau:hover {
background: url(http://i1096.photobucket.com/albums/g336/BellaTuckM/linepattern.png) repeat center;
letter-spacing: 2px;
-webkit-transition-duration: .50s;
}

Para poder usa-lo é só adicionar um gadget HTML/JavaScript e colocar o código abaixo nele :


<div style="text-align: center;><a href="seu_link"><miau>seu título</miau></a>


Espero que tenham gostado do Tutorial  
créditos : Sweet Kawaii 

Nenhum comentário:

Postar um comentário