Efeito CSS3 - Menu CuteMonsters

Olá Candies, estão gostando da Neh-Chan, ela é super legal né ? 
Trouxe hoje um menu bem fofinho de minha autoria para vocês, é muito fofo mesmo visualizem aqui: XXXX.

Gostaram ?
Então aprenda como faz.



Agora aperte F3 ou CTRL+F e Procure por ]]</b:skin>.
 Logo acima cole o código abaixo:

@font-face {font-family: "Square Face";
src: url('http://static.tumblr.com/sxeyvs3/Klomemfhx/square_face.ttf');
format("truetype");
}
#square {
font-family: "Square Face";
font-size: 65px;
color: #0090ef;
text-shadow: 0px 0px 3px #0090ef;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#square:hover {
color:#00b4f2;
text-shadow: 0px 0px 3px #00b4f2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Para poder usa-lo, adicione um gadget Javascript/HTML, e cole o código abaixo:

<a href="#" id="square">A</a>
<a href="#" id="square">B</a>
<a href="#" id="square">C</a>
<a href="#" id="square">D</a>

Se quiser mostrinhos diferentes é só mudar onde está em negrito ok ?