Tutorial - Efeito Sweet Light

Olá \o/

ALOU ALOU! ADIVINHEM QUEM FAZ ANIVERSÁRIO HOJE? Eu mesmo. Obrigado, de nada. Bem, eu não sei o que vou fazer hoje, mas espero que seja comer uma pizza deliciosa e ganhar presente :v Rezem aí porque uma colega disse que vai tacar ovo em mim.

O aniversário é meu mas quem ganha presente é você (não na verdade, porque ficou uma bosta o efeito e eu ia postar de qualquer jeito). Eu resolvi fazer um efeito simples pra ser usado como afiliados ou qualquer outra coisa (veja aqui). Espero que gostem. xoxo ~

Cole isso antes de ]]></b:skin/>

.sweetlight {
margin: 3px;
border-radius: 50px;
font-family: arial; /* Fonte padrão, mude se quiser */
text-align: center;
font-size: 20px;
padding: 3px;
display: inline-block;
font-weight: lighter;
background: #f9f9f9; /* Cor do interior da bolinha */
color: #b0c571; /* Cor da fonte */
-webkit-transition-duration: .90s;
border: 3px solid #b0c571; /* Cor da borda (mesma da fonte) */
width: 30px;
height: 30px;}
.sweetlight:hover {
-webkit-animation: hey 1s alternate; /* NÃO MUDE */}
@keyframes hey {
0% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);}
25% {
color: transparent;
border: 3px solid transparent;}
50% {
color: #9cae65; /* Aqui um tom mais escuro que a fonte do início */}
75% {
box-shadow: 0px 0px 30px #b0c571; /* Cor da sombra no final */
-webkit-transition-duration: .90s;}
100% {
box-shadow: none;
-webkit-transition-duration: .90s;}
}

Agora vá até Layout>Adicionar um widget>Html/JavaScript e adicione:

<center><a href="LINK" title="NOME_NO_TOOLTIP"><div class="sweetlight">CC</div></a></center>

Espero que tenham gostado! Qualquer problema, coloque nos comentários. Beijos ~