Como criar botões personalizados com HTML
Com os códigos HTML você consegue criar tudo que você quiser através do HTML. Criar sites com HTML é uma opção, mas na maioria das vezes as pessoas não criam por preguiça ou porque não gostam de criar codigo por codigo. Por isso é sempre bom ter uma ajuda no ramo da tecnologia. Botão simples de HTML
<!DOCTYPE html>
<html>
<head>
<title>Botão HTML</title>
</head>
<body>
<button type=”button”>Clique Aqui!</button>
</body>
</html>
Como ficaria esse botão ;
Copia e cola em sem HTML para ver como vai ficar. Lembrando que é um botão simples em HTML
Agora vou deixar uma animação em CSS para você complementar no seu HTML
CSS PRONTO PARA DEIXAR O BOTÃO ANIMADO
<!DOCTYPE html>
<html>
<head>
<title>Botão em Movimento</title>
<style>
@keyframes moveButton {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
button {
animation: moveButton 2s infinite;
}
</style>
</head>
<body>
<button type=”button”>Clique Aqui!</button>
</body>
</html>
Faça o teste para ver com vai ficar. Existe diversos modelos de botões em HTML que você consegue fazer.
Botão em HTML coloridos
Exemplo abaixo vai ser verde.
<!DOCTYPE html>
<html>
<head>
<title>Botão Verde</title>
<style>
.green-button {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button class=”green-button”>Clique Aqui!</button>
</body>
</html>
Para mudar a cor do botão basta, mudar o background-color: coloque aqui a cor
Mais um exemplo de botão em HTML com Pulsação agora !
<!DOCTYPE html>
<html>
<head>
<title>Botão com Efeito de Pulsação</title>
<style>
.pulse-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<button class=”pulse-button”>Clique Aqui!</button>
</body>
</html>
Pronto !! 3 dicas de botão com HTML para você usar. Todas essas formas você consegue inserir através das tags HTML
Esse post é pra quem ama HTML. Vamos criar mais HTML ahahahaha
