Criando um botão HTML

Nesse tutorial, eu irei ensinar a fazer um botão que muda de cor ou tamanho quando o mouse passa pelo botão (onMouseOver), usando a linguagem de programação HTML.

Siga a página para ver o tutorial.
Comentários são bem-vindos

O que eu vou precisar?
Você vai precisar do programa de edição de textos Bloco de Notas, que todos os computadores têm, e de um programa de edição de imagens, pode ser qualquer um, Paint, Corel, Photoshop e diversos outros.

Vamos começar.

1° Passo:
Crie uma pasta com o nome do botão (Ex.: Pagina inicial)

2° Passo:
Agora, crie as imagens que irão aparecer, crie uma imagem original, e uma para quando o usuário passar o mouse sobre o botão.
Salve elas na pasta que você criou, de preferência, como JPG.
Dê os seguintes nomes a elas:
“Acima.jpg” (sem aspas), para a imagem original, e “Sobre.jpg” (sem aspas), para a imagem que aparecerá quando o usuário passar o mouse sobre o botão

3° Passo:
Agora abra o bloco de notas.
Digite ou copie o seguinte código:
<a href=”#” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(‘Image1′,”,’Abaixo.jpg’,0)”><img name=”Image1″ border=”0″ src=”Acima.jpg”></a>

4° Passo:
Clique em “Salvar Como”, selecione no menu “Todos os Arquivos”
Digite o nome “Index.html” (sem aspas)

e salve o arquivo.

Pronto
Espero que seja útil.

Qualquer dúvida entre em contato

Anúncios

7 Responses to Criando um botão HTML

  1. Vinicius Mendes says:

    Galera malz pela formatação
    ficou com uns espaços ali
    qualquer dúvida mandem um e-mail

  2. Christopher says:

    Não entendi nada.

  3. hacker sinistro says:

    alert (‘vc foi infectado pelo virus system hackers!’)

  4. Felipe Mikael says:

    Cara, achei seu post muito interessante, porém me surgiu uma dúvida. Eu vi que tem como eu criar um botão e quando eu clicar nele ele abre uma página no memso FRAME. Existem a possibilidade dele abrir um link em outro FRAME? Abraço!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: