Criando um Botão Clicável em HTML - Tutorial Passo a Passo

Introdução

O elemento HTML <button> é usado para criar um botão em uma página web que pode ser usado para realizar certas ações. Neste tutorial, aprenderemos como criar um botão usando HTML.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 86%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Criar o arquivo HTML

Crie um arquivo HTML chamado index.html. Neste arquivo, criaremos uma estrutura HTML básica.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Criando um Botão em HTML</title>
  </head>
  <body></body>
</html>

Criar um botão

Para criar um botão, usamos o elemento HTML <button>. Podemos adicionar texto, imagens ou conteúdo multimídia entre as tags de abertura e fechamento do elemento button.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Criando um Botão em HTML</title>
  </head>
  <body>
    <button>Clique em Mim!</button>
  </body>
</html>

Adicionar um atributo onclick

Podemos adicionar um atributo onclick ao elemento button para executar uma função JavaScript quando o botão é clicado.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Criando um Botão em HTML</title>
  </head>
  <body>
    <button onclick="alert('Olá Mundo!')">Clique em Mim!</button>
  </body>
</html>

Adicionar estilos CSS

Podemos usar CSS para estilizar o botão de acordo com nossos requisitos. Aqui, adicionamos algum CSS básico para alterar a cor do texto, a cor de fundo e o preenchimento (padding) do botão.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Criando um Botão em HTML</title>
    <style>
      button {
        background-color: #4caf50; /* Verde */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button onclick="alert('Olá Mundo!')">Clique em Mim!</button>
  </body>
</html>

Resumo

Neste tutorial, aprendemos como criar um botão usando HTML. Também aprendemos como adicionar uma função JavaScript ao elemento button e aplicar estilo CSS ao botão. Ao dominar o elemento button, você pode facilmente criar botões para executar ações em sua página web.