Como criar um botão HTML com CSS
Os botões são elementos essenciais em qualquer página da web, usados para direcionar ações dos usuários. Neste tutorial, vamos aprender como criar um botão HTML simples e estilizá-lo com CSS para torná-lo mais atraente e interativo.
Passo 1: Estrutura HTML básica
Começamos com uma estrutura HTML básica que inclui um botão simples. O código HTML abaixo mostra como criar um botão com a classe myButton:
<!DOCTYPE html>
<html>
<head>
<title>Botão com CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<button class="myButton">Clique aqui</button>
</body>
</html>Passo 2: Estilo CSS
Em seguida, criamos um arquivo CSS chamado styles.css para estilizar nosso botão. O código CSS abaixo define o estilo padrão do botão, incluindo cor de fundo, cor do texto, borda arredondada e efeito de hover:
/* Estilo padrão do botão */
.myButton {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
text-decoration: none;
}
/* Efeito de hover */
.myButton:hover {
background-color: #0056b3;
}Passo 3: Explicação do código CSS
.myButton: Define uma classe para o botão, que pode ser usada em vários botões.display: inline-block;: Permite que o botão se comporte como um elemento de bloco, mas mantenha seu tamanho de acordo com o conteúdo.padding: 10px 20px;: Define o preenchimento interno do botão.background-color: #007bff;: Define a cor de fundo do botão.color: white;: Define a cor do texto.border: none;: Remove a borda do botão.border-radius: 5px;: Adiciona bordas arredondadas ao botão.cursor: pointer;: Altera o cursor do mouse para indicar que o botão é clicável.text-align: center;: Centraliza o texto dentro do botão.text-decoration: none;: Remove a decoração de texto padrão, como sublinhado.
Passo 4: Resultado final
Ao visualizar a página HTML no navegador, você verá um botão com o texto “Clique aqui” com o estilo definido pelo CSS. O efeito de hover altera a cor de fundo do botão quando o mouse passa sobre ele.
Este é um exemplo simples de como criar um botão HTML com CSS. Você pode personalizar o estilo conforme necessário para se adequar ao design do seu site ou aplicativo.
