Smooth Effect para Links

Oie...Trouxe um efeito para links bem suave e fofinho!! Vocês podem adicioná-lo nos links de suas postagens, em todos os do blog ou em menus. É bem fácil, só se usa CSS e HTML e já vou deixar prontinho o código com cores diferentes ok?
Passe o mouse aqui para ver o efeito
Vamos lá...

Acesse seu Modelo - Editar HTML e cole antes de ]]></b:skin> um dos códigos abaixo, de acordo com sua cor favorita...
Verde
 .smooth,a.smooth {
background: #fff;
width: 100px;
color: #24F8FF;
text-align: center;
font-size: 12px;
text-shadow: 1px 2px 3px #ccc;
padding: 3px;
display: block;
-webkit-transition: 1s;
}
.smooth:hover,a.smooth:hover {
box-shadow: inset 190px 0 70px 0 #C7F5DD;
-webkit-transition: 1s;
color: #fff;
}

Rosa
 .smooth,a.smooth {
background: #fff;
width: 100px;
color: #FF6BAE;
text-align: center;
font-size: 12px;
text-shadow: 1px 2px 3px #ccc;
padding: 3px;
display: block;
-webkit-transition: 1s;
}
.smooth:hover,a.smooth:hover {
box-shadow: inset 190px 0 70px 0 #FFC2F7;
-webkit-transition: 1s;
color: #fff;
}

Lilás
 .smooth,a.smooth {
background: #fff;
width: 100px;
color: #C27ABB;
text-align: center;
font-size: 12px;
text-shadow: 1px 2px 3px #ccc;
padding: 3px;
display: block;
-webkit-transition: 1s;
}
.smooth:hover,a.smooth:hover {
box-shadow: inset 190px 0 70px 0 #C27ABB;
-webkit-transition: 1s;
color: #fff;
}

Azul
 .smooth,a.smooth {
background: #fff;
width: 100px;
color: #93CDEB;
text-align: center;
font-size: 12px;
text-shadow: 1px 2px 3px #ccc;
padding: 3px;
display: block;
-webkit-transition: 1s;
}
.smooth:hover,a.smooth:hover {
box-shadow: inset 190px 0 70px 0 #93CDEB;
-webkit-transition: 1s;
color: #fff;
}

Para que apareça em algum link, use esse código:
 <a class="smooth" href="URL-DO-LINK">NOME DO LINK</a>

Se quiser que o resultado seja obtido em todos os links do seu blog, encontre: 
a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

E substitua por: 
 a:link  {
color: #24F8FF;
font-size: 12px;
text-shadow: 1px 2px 3px #ccc;
padding: 3px;
-webkit-transition: 1s;
}
a:visited {
  text-decoration:none;
  color: #a1a1a1;
}
a:hover {
box-shadow: inset 190px 0 70px 0 #C7F5DD;
-webkit-transition: 1s;
color: #fff;
}

Alterando a cor conforme desejar. Só isso ^-^ Espero que tenham gostado, super beijus e obrigada por todos os comentários fofos!!
Fonte: http://farahdinipunyeblog.blogspot.com

7 Comments

  1. ✖~ Nakashita Beel26 maio

    muito bom tuto, gostei ^^
    kissus~
    ncnosekai.blogspot.com

    ResponderExcluir
  2. Gabi27 maio

    Que diferente o efeito! :3
    Curti! ^^

    ResponderExcluir
  3. Unknown28 maio

    Bem diferente já vi ums que são bem legais mais esse é super!! ;3

    Kisses ^^

    Visita?


    http://my-dream-evilyn.blogspot.com.br/

    ResponderExcluir
  4. EriiKa TriindAde28 maio

    Roberta eu sou nova nessas coisas
    E eu não to consiguindo voce pode
    adicionar meu face eu queria falar
    com vocer por favor eu sou sua fã

    https://www.facebook.com/erika.trindade.319

    ResponderExcluir
    Respostas
    1. Roberta28 maio

      Olá :3 Eu uso a fan page do blog como meu face, sinta-se a vontade para deixar sua dúvida lá ou em qualquer uma das redes do blog ok?
      Ou também pelo uservoice (make a wish) ali no cantinho ^^
      Beijus e espero conseguir ajudar...

      Excluir
  5. Mah-Chan ♥29 maio

    Own,lindo...mais acho que deu errado no meu D:

    Beijus,Mara

    maranapassarela.blogspot.com

    ResponderExcluir
  6. wangxian aus03 junho

    Adorei *-* ficou bem legal

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up