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?
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
muito bom tuto, gostei ^^
ResponderExcluirkissus~
ncnosekai.blogspot.com
Que diferente o efeito! :3
ResponderExcluirCurti! ^^
Bem diferente já vi ums que são bem legais mais esse é super!! ;3
ResponderExcluirKisses ^^
Visita?
http://my-dream-evilyn.blogspot.com.br/
Roberta eu sou nova nessas coisas
ResponderExcluirE 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
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?
ExcluirOu também pelo uservoice (make a wish) ali no cantinho ^^
Beijus e espero conseguir ajudar...
Own,lindo...mais acho que deu errado no meu D:
ResponderExcluirBeijus,Mara
maranapassarela.blogspot.com
Adorei *-* ficou bem legal
ResponderExcluir