Javascript: Criando botões animados para o blog

Hoje, estarei passando uma dica de como criar um botão animado para o blog, semelhantemente ao que está nessa postagem.

Faça o seguinte:

- Para criar um botão animado, primeiramente você precisará hospedar a sua imagem em algum lugar (até mesmo no blogger). Você poderá usar o Google Sites, Picasa ou qual quer outro (de preferência um de confiança seu).

 - Você deverá determinar o tamanho que você desejará para seu botão. O padrão utilizado por Abelhudos da informática foi 210px por 76px. (futuramente, posso mudar). Isso é importante, já que você é a melhor pessoa que saberá qual é o tamanho ideal para se adaptar ao menu em que se usará o botão.

 - Depois de escolher um tamanho para o botão, vamos então ao código que fará com que seu botão “Aumente” e “diminua”.

O código a seguir para se criar um botão animado não usará duas imagens, como de costume, mas usará um comando que, ao passar o mouse sobre, a imagem usada para animação aumentará, e, ao retirar o ponteiro, voltará ao tamanho normal.

Você necessitará editar o código em um programa separado. Essa dica funcionará perfeitamente se você usar o programa Notepad++ (indicação de  do Gerenciando Blog em 5 ferramentas grátis para apoiar seu blog ). Se não preferir e já for um usuário avançado, pode usar o bloco de notas do Windows.

A seguir, veremos como será o código do botão animado usando como exemplo a página inicial.

<a href="url página inicial do seu blog"><img src="endereço da sua imagem" height="altura da imagem original" width="largura da imagem original" onmouseover="this.height='altura que aumentará'; this.width='largura que aumentará';" onmouseout="this.height='altura que voltará ao normal (ponha a mesma da original)'; this.width='largura que voltará ao normal';" ></a>

a href=“link” - é uma tag de link. Como ela está antes da tag img, significa que a imagem será tratada como link. /a define até onde será um link, ou seja, nesse caso foi colocado depois de img.

 img src="url da imagem” - é uma tag de imagem. Ela possui os elementos height que é a altura, width que é a largura, onmouseover que significa que iniciará um novo comando ao passar o mouse sobre e onmouseout significa que o evento terminará ao tirar o mouse.  This.height e this.width é o comando dentro de onmouseout e onmouseover; no caso, esses dois fará que mude a altura e largura da imagem dentro de onmouseover, e volte ao normal quando sair em onmouseout.

Veja o exemplo abaixo que estava sendo utilizado nesse blog! (somente o botão principal)

<a href="http://cdoispontosbarrawindows.blogspot.com.br/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOv4W8ezDBsD1X-GtWCJ0xQHj2VrWOepuNO033sUJ4enxjCQgN8HMup867Pt7DiFIh2wuC-3h7prZtJy97jpAVtGbIG7ekVe3IaGn4FSjkEJkK7p6nBZUpSG7lOGZ5IL4mniy7Bnfgfek/h120/home_bot%25C3%25A3o.png" height="76" width="210" onmouseover="this.height='80'; this.width='230';" onmouseout="this.height='76'; this.width='210';"></a>

Você poderá criar o próximo botão animado copiando o mesmo código e mudando a url da imagem para outra que represente outro link de seu blog.

Veja abaixo um efeito semelhante: