Efeito Smooth nos Links

Nossa, que dia chuvoso aqui em Ribeirão Pires, que até derrubou uma árvore, que quase cai em cima da casa da vizinha... 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?  Veja o efeito clicando Aqui!

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!! Créditos: Reino Kawaii