Oi gente tudo bem? vou ensinar vocês a fazerem esse menuzinho lindo
E o melhor dele é que funciona também no Wordpress yay, vamos aprender?
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/>
Ele não é obrigatório, é apenas a fonte.
/*********** Menu Maluco Urban e Conceitual *****************/
/* Animação */
@-webkit-keyframes gangorra {
from {-webkit-transform: rotate(10deg);}
to {-webkit-transform: rotate(-10deg);}
}
@-moz-keyframes gangorra {
from {-moz-transform: rotate(10deg);}
to {-moz-transform: rotate(-10deg);}
}
@-o-keyframes gangorra {
from {-o-transform: rotate(10deg);}
to {-o-transform: rotate(-10deg);}
}
/* Menu */
mn {display: inline-block;
font-family: 'Fjalla One', cursive;
font-size: 25px; /* Tamanho da fonte */
background: #fe579c; /* Cor de fundo do menu */
padding: 2px;
text-align: center;
text-transform: uppercase;
border-radius: 5px;
color: #fff; /* Cor da fonte */
cursor: pointer;
text-shadow: 2px 2px 0px #e9508f; /* Sombra nas palavras do menu */
width: 90px; /* Tamanho do Menu */
}
mn:hover {
-webkit-animation-name: gangorra;
-webkit-animation-duration: .01s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: gangorra;
-moz-animation-duration: 0.1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-o-animation-name: gangorra;
-o-animation-duration: 0.1s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;}
<a href="/"><mn>Home</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
#comments {
padding: 15px;
}
.post-outer .comments {
margin-top: 2em; }
background: url(link da imagem de fundo) repeat;