O elemento button é usado para executar uma ação específica quando é ativado. Aqui está um exemplo de um elemento button com o texto do botão Start Game.

<button>Start Game</button>

Outros exemplos de uso do elemento button incluem enviar um formulário, mostrar um modal ou alternar a abertura e o fechamento de um menu lateral. O elemento button possui um atributo type que controla o comportamento do botão quando ele é ativado. O primeiro valor possível para o atributo type seria o tipo button. Aqui está um exemplo de uso do elemento button com o tipo button e um texto de Show Alert:

<button type="button">Show Alert</button>

Por padrão, o botão não fará nada quando ativado. No entanto, você pode adicionar algum código JavaScript para tornar o botão interativo, como mostrar um alerta neste caso. Clique no botão Show Alert para ver um alerta aparecer na tela. Para interagir com o exemplo, você precisará ativar o editor interativo. NOTA: Este exemplo interativo está usando JavaScript mas você não precisa se preocupar em entender o código JavaScript. Você aprenderá sobre JavaScript em módulos futuros.

<button type="button">Show Alert</button>
<script src="index.js"></script>

const btn = document.querySelector("button");
btn.addEventListener("click", () => alert("You clicked on the alert button"));

Outro valor possível para o atributo type é o valor submit. Aqui está um exemplo de uso de um elemento button com o tipo submit.

<form action="">
  <label for="email">Email address:</label>
  <input type="email" id="email" name="email" />
  <button type="submit">Submit form</button>
</form>

Dentro deste elemento form, há um elemento label e input para o endereço de email do usuário. Quando o usuário clicar no botão de envio, os dados dele serão enviados para o servidor e processados. O terceiro valor possível para o atributo type é o valor reset. Here is an example of a form element with reset and submit buttons. Ative o editor interativo e interaja com o campo de email na janela de visualização fornecendo um endereço de email falso. Em seguida, clique no botão de resetar para ver seu email desaparecer do campo.

<form action="">
  <label for="email">Email address:</label>
  <input type="email" id="email" name="email" />
  <button type="reset">Reset form</button>
  <button type="submit">Submit form</button>
</form>

Neste exemplo modificado, um elemento label e input são usados para coletar o endereço de email do usuário. Quando o usuário clicar no botão de reset, então ele irá limpar todos os dados de entrada dele. É importante notar que botões de reset geralmente não são a melhor ideia porque podem levar os usuários a resetar seus dados acidentalmente. Além disso, múltiplos botões no seu formulário podem sobrecarregar a interface do usuário. Outra forma de criar botões em HTML é usar o elemento input. O elemento input também possui um atributo type com os valores possíveis submit, reset e button. Aqui está um exemplo de uso do elemento input com o type definido como button:

<input class="start-btn" type="button" value="Start Game" />
<script src="index.js"></script>

document.addEventListener("DOMContentLoaded", () => {
  const btn = document.querySelector(".start-btn");
  btn.addEventListener("click", () => {
    const paraEl = document.createElement("p");
    const bodyEl = document.querySelector("body");

    bodyEl.appendChild(paraEl);
    paraEl.textContent = "The game has started!!!";
  });
});

O atributo value é usado para mostrar o texto do botão. Então, qual é a diferença entre usar os elementos input e button? Os elementos input são elementos void, o que significa que eles não podem ter nós filhos, como texto, e só podem ter uma tag de abertura. Por outro lado, o elemento button oferece mais flexibilidade porque você pode aninhar texto, imagens e ícones dentro dele.