Efeito Round

Yo meus amores, como vão? Hoje ta um frio gostoso aqui no RJ rsrs que da ate preguiça de postar, então decidi fazer uns tutoriais que são mais fáceis para mim e uteis para vocês. Desta vez trago o efeito Round, eu o encontrei em um blog mas como pedi o endereço colocarei créditos para o KW.

Brevia do efeito

1. Vá até seu HTML e procure por ]]></b:skin>. Acima desta tag, cole o seguinte código:

Códigos

.efeitoround  {
background: #CORDOFUNDO;
border: 5px solid #CORDABORDA;
display: inline-block;
font: 20px 'Chela One', cursive;
width: 50px;
height: 40px;
color: #CORDAFONTE;
padding-top: 10px;
margin: 5px;
-webkit-border-radius: 50px;
-webkit-transition: 1s linear;
}
.efeitoround:hover {
background: #e7a6c0;
-webkit-box-shadow: inset 0px 60px 10px #CORDOFUNDOHOVER;
border-radius: 0px;
color: #ffffff;
text-decoration: none;
-webkit-border-radius: 50px;
-webkit-transition: 1s linear;
}

2. Arrume as partes em negrito, como se pede e então salve. Siga ate seu Layout e em um gadget de HTML/JavaScript, cole o seguinte código:

Códigos

<a href="LINK" class="efeitoround" title="NOME INTEIRO DO BLOG">SIGLA DO BLOG</a>

Se quiser adicionar uma fonte diferente como eu coloquei, basta usar este tutorial. E então a onde esta escrito font: 20px 'Chela One', cursive; você coloca o nome da fonte que você escolheu.