Todo mundo já se deparou com um botão ao abrir um site querendo alguma coisa; Clique aqui, Última oportunidade!, Compre agora!, e muitas outras frase e palavras que querem nos levar a uma determinada ação. O objetivo é fazer com que você click.
Mas, vamos ver como é feito um botão para site na prática?
.png)
1- Botão simples
<button>Clique aqui</button>
<button> é a tag semântica própria para botões.
O texto dentro da tag é o que aparecerá dentro do botão.
2- Usando <input type="button">
Outra maneira menos comum hoje, mas ainda usada:
<input type="button" value="Clique aqui">
Neste caso o atributo value define o texto que será mostrado dentro do botão.
Este formato é menos utilizado por ser menos flexível quanto a extilização deste botão em comparação com o <button>.
3. Botão com ação simples (ex.: exibir alerta)
<button onclick="alert( 'Você clicou no botão!' )">Clique aqui<button>
O atributo onclick executa o código JavaScript quando o botão é clicado.
Aqui usamos um alerta como exemplo de ação.
4- Estilizando com CSS (melhorando a aparência do botão)
<button stlye="background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 10px; cursor: pointer;">
Clique aqui
</button>
O que fizemos aqui?
Adicionamos estilos diferentes ao botão como; cor, bordas, espaçamentos e função de click específico.
background-color muda a cor de fundo.
color muda a cor do texto ou fonte.
padding ajusta o espaço interno.
border-radius deixa os cantos arredondados.
cursor: pointer muda o cursor quando passa o mouse.
Comments
Post a Comment