Menu cute trasition



Oi negada, hoje vim com mais um tutorial, mas agora é como fazer aquele menu cute trasition, você não sabe como ele é ? Não fique preocupada jaja eu mostro um print dele, bom eu encomendo esse menu para você, ele é bem fofo você vai ver ! Então primeiro vou mostrar o print dele :

Sem o mouse:


Com o mouse:

Gostaram ? Então vamos ver como faz. Vai no seu HTML e procure por:
]]></b:skin>
Achou ? hm. Acima da tag, cole o seguinte código:
/*---Início do Menu Cute trasition---*/
ct {
font-family: century gothic; /* Fonte do Menu */
width: 10%; /* Tamanho do Menu */
float: left;
background:#FF82AB; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 11px;
-webkit-border-top-left-radius: 1px;/* Efeito das bordas */
border-radius: 11px;
border-top-left-radius: 1px;
-webkit-transition-duration: .80s; /* efeito trasition */
font-size: 10pt; /* Tamanho da fonte */
color: #000; /* Cor da fonte */
}
ct:hover {
font-family: century gothic; /* Fonte do Menu quando passa o mouse */
width: 10%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#eee; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 22px;
border-radius: 22px;
-webkit-transition-duration: .80s; /* efeito trasition */
font-size: 10pt; /* Tamanho da fonte do Menu quando passa o mouse */
font-style:bold; /* Fica em negrito quando passa o mouse */
color: #000; /* Cor da fonte do Menu quando passa o mouse */
}
/*---Fim do Menu Cute trasition---*/
Depois de colar é só você editar se quiser, agora é só colar o seguinte código abaixo para formar um gadget de HTML/JavaScript:
<a href="Link"><ct>Nome</ct></a>
<a href="Link"><ct>Nome</ct></a>
<a href="Link"><ct>Nome</ct></a>
<a href="Link"><ct>Nome</ct></a>
 Depois é só salvar, lembrando que aonde está em vermelho é o link da página e aonde está azul é o nome da página. Beijos. xoxo


2 comentários:

  1. O menu é muito fofo... amei flor <3
    Bjinhos, Júuh
    ~~> http://coisinhasdemeninas13.blogspot.com.br/

    ResponderExcluir
  2. Que bom que gostou flor !
    Volte sempre, vou retribuir recadinho. <3

    ResponderExcluir

-Sigo de volta,é só pedir.
-Sem palavrões,por favor.
-Coloque o link do seu blog,para mim visita-lo.
-Sem xingamentos,brigas,e coisas em comum.
-Aceito opiniões sobre o blog,só seja educada (o).
-Se leu tudo isso não custa nada comentar né? :3