Tutorial- Efeito Round


Yoo~

Espero que não estejam irritados comigo, porque eu nem dei sinal de vida, as provas estão me desgastando, e também, eu espero que estejam gostando das minhas postagens. Eu sou meio desmiolada e as vezes minhas postagens saem estranhas.

Hoje, eu trouxe um efeito que eu aprendi no Kawaii World, o Efeito Round, ele é bem fofinho, eu recomendo usá-lo na sidebar, espero que gostem.

Enjoy~
Aqui o exemplo de como ficará:
Imagem retirada do Kawaii World.

1. Vá no seu HTML e procure por ]]></b:skin> e acima cole:
.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;}

Personalize ao seu gosto e salve, agora crie um gadget HTML/Javascript e cole:
<a href="LINK" class="efeitoround" title="NOME INTEIRO DO BLOG">SIGLA DO BLOG</a>
Se você quiser que apareça mais bolinhas, repita esse código trocando as informações.

Gostaram? Qualquer dúvida é só comentar! 

Um comentário:

  1. Olá! Ótimo tutorial =D Eu já conhecia o efeito e acho muito lindinho *---* Super fofo :3

    Beijos, Mrs. Nightshade.

    ResponderExcluir