Menu redondo com hover


Oi gente. Então, eu não postei ontem, heh. ME PROCESSEM, NOW! D:
Enfim, trouxe um tutorial de menu com hover pra vocês. Os créditos são do tumblr lo-v-e-r-s.
Para ver a preview clique aqui.
No preview o link acabou ficando sublinhado, não sei o que aconteceu. Mais no código não tem nada de sublinhado nele, não se preocupe.
Para ler o tutorial clique em Leia Mais e lets go!



No seu blog vá em Editar HTML clique em ctrl + f e procure por: ]]></b:skin>
Acima disso você vai colar esse código: 

.menu{text-align: center; text-decoration: none;}
.menu a{border-radius: 100px 100px 100px 100px; padding: 10px 10px 10px 10px; display: inline-block; background:#b7b6d5; margin-top: 5px; font-size: 8pt; color: #ffffff; font-family: tahoma; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; font-weight: bold;}
.menu a:hover {-webkit-transform: rotateY(-360deg) ; -webkit-transition-duration: .70s; background: #e9eeff;}

Mude as cores conforme o seu desejo depois salve o modelo.

Em layout você vai adicionar um novo gadget de HTML/JavaScript e vai colar esse outro código:

<div class="caixa">
<div class="menu">
<a href="/">01.</a>
<a href="LINK">02.</a>
<a href="LINK">03.</a>
<a href="LINK">04.</a>
</div></div>

Coloque os seus links, os nomes e pronto.
Bye bye~

Nenhum comentário:

Postar um comentário