[Tutorial] Menu Sweet Light

Oi oi pessoas bonitas e feias do meu coração! Como estão? Não sei se já usei essa imagem antes, chega uma hora na sua vida que você posta a tanto tempo que nem sabe as imagens que usou nos posts... Espero que vocês não achem a imagem de introdução uma grande coisa porque vocês estão vendo aí a minha situação -e também porque fico mais de 30 minutos escolhendo a imagem que vou usar no post e no final ela não tem nada a ver com o que eu escrevo. Bem... Esse post é programado, mas não tenham preconceito, ok? A tia tá sem tempo -q

Quem quiser ver a prévia, ela está no primeiro gadget desse layout. Vá em Modelo > Editar HTML > Aperte Ctrl+F e pesquise por ]]></b:skin> e acima disso, cole o código a seguir:

.sweetlight { /*menu do gadget de bem-vindo*/
margin: 3px;
border-radius: 50px;
font-family: verdana; /*tipo da fonte*/
text-align: center;
font-size: 20px;
padding: 3px;
display: inline-block;
font-weight: lighter;
background: #f9f9f9; /*cor do interior da bolinha*/
color: #346e79; /*cor da fonte*/
-webkit-transition-duration: .90s;
border: 3px solid #1b5c68; /*cor da borda*/
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: #3f5348; /* aqui um tom mais escuro que a fonte do início */}
75% {
box-shadow: 0px 0px 30px #9fd1b6; /* cor da sombra no final */
-webkit-transition-duration: .90s;}
100% {
box-shadow: none;
-webkit-transition-duration: .90s;}
}

Eu destaquei as cores pra ficar mais fácil. Para usar, é só usar o código abaixo quantas vezes você quiser:

<a href="LINK" title="NOME"><div class="sweetlight">&#8487;</div></a>

Para que os botões fiquem um abaixo do outro, adicione a tag <br/> depois de cada linha.

E se quiser que o menu fique ao lado do gatget, coloque este código acima do anterior, mude os números caso precise. Quando terminar, não esqueça de fechar o código final com </div>

<div style="position:absolute; margin-left: -50px; margin-top: -7px; background: #transparent;">

Obrigada pra você que leu até aqui, tenha uma boa noite <3