Este é o sétimo post da nossa série de tutoriais que vai te ajudar a criar sua primeira página web de forma profissional com HTML e CSS. Neste artigo vamos te ensinar o que são botões HTML CSS. E, além disso, vamos te ensinar a como criar botões e personalizados.
No entanto, se você ainda não tem nenhuma noção sobre as tecnologias HTML e CSS, recomendamos que siga o guia “O que é HTML” e depois volte aqui, pois assim ira absorver melhor todo esse conteúdo.
Conteúdo
Botões HTML CSS: Como criar botões
Tag para criar um botão
Como foi dito anteriormente, a tag usada para criar um botão é o <button> e fechamento </button>. Depois deve especificar o texto entre as tags.
Como adicionar link na tag button
<a href="URL"><button>botão</button></a>
Como estilizar um botão HTML com CSS
Para aplicar estilo ao botão HTML com CSS siga as etapas abaixo:
- O primeiro passo é selecionar o botão que você quer editar. Isso pode ser feito com classe, id ou o pela própria tag;
- Depois de selecionado, basta aplicar o estilo que desejar;
- Bônus: caso queira animar ao passar com o mouse, pode aplicar o efeito hover;
Agora que já sabe como estilizar o seu botão HTML, siga para a prática!
Como mudar a cor de fundo do botão
Mudar a cor de fundo do botão é uma das alterações mais comuns feitas em sua aparência. Isso pode ser feito usando a propriedade background-color do CSS. Você pode especificar uma cor em código hexadecimal, RGB ou nomeado. Lembre-se de escolher uma cor que contraste com o texto do botão para que ele seja fácil de ler. Além disso, a cor de fundo também pode ser alterada quando o botão estiver sendo “hoverado”, para dar uma indicação visual de que ele é clicável.
Como mudar a cor do texto no botão
Assim como a cor de fundo, a cor do texto do botão também pode ser alterada usando a propriedade color do CSS. Novamente, é importante escolher uma cor que contraste com a cor de fundo do botão para que o texto seja fácil de ler.
Como aplicar hover no botão
Ao aplicar o efeito hover em um botão, você pode fazer com que ele mude de cor, de tamanho ou de formato quando o cursor do mouse é passado sobre ele. Para adicionar esse efeito, você pode usar o seletor :hover do CSS, que permite definir regras de estilo específicas para o botão quando ele estiver sendo “hoverado”. Você pode, por exemplo, mudar a cor de fundo do botão, a cor do texto ou adicionar uma borda. O efeito hover pode tornar seu botão mais atraente e interativo para os usuários.
Como alterar o tamanho do botão
O tamanho do botão pode ser alterado usando as propriedades width e height do CSS. Você pode definir valores em pixels, porcentagem ou unidades relativas. Lembre-se de que o tamanho do botão deve ser proporcional ao tamanho do texto dentro dele para que seja fácil de ler e use margens para posicionar o botão na página.
Como adicionar uma borda ao botão
Adicionar uma borda ao botão pode ser uma maneira simples de fazer com que ele se destaque na página. Isso pode ser feito usando a propriedade border do CSS. Você pode especificar a espessura, a cor e o estilo da borda. Lembre-se de escolher uma espessura e cor que se adapte à aparência geral do botão e do site em que ele está sendo usado. Você também pode adicionar uma borda apenas em torno de uma ou mais partes do botão, como a borda inferior.
Como adicionar sombras ao botão
Adicionar uma sombra ao botão pode ajudar a criar uma aparência mais tridimensional e torná-lo mais destacado na página. Isso pode ser feito usando a propriedade box-shadow do CSS. Você pode especificar a posição, a intensidade, a cor e o tamanho da sombra para criar o efeito desejado. Lembre-se de escolher uma sombra que se adapte à aparência geral do botão e do site.
Exemplos de código para aprender como criar botões HTML CSS
Em resumo os botões HTML podem ser criados com a tag <button>, logo para adicionar o link basta envolvê-lo na tag para hiperlink <a>. No entanto, ficara sem estilo, por isso deve aplicar regras de estilo para que fique personalizado e com um visual mais atrativo para o usuário.
Como já tem o conhecimento teórico, vamos para a prática! Abaixo separamos alguns exemplos didáticos para você analisar e treinar, siga:
<a href="URL"><button class="botao">botão</button></a>
.botao{
border: solid 1px blue;
border-radius: 20px;
color: blue;
background-color: white;
transition: background-color 0.5s ease, color 0.5s ease, transform 0.5s ease;
}
.botao:hover{
background-color: blue;
color: white;
transform: scale(1.2)
}
Como criar botões animados em HTML e CSS
Os botões animados podem adicionar um toque de interatividade e dinamismo ao seu site ou aplicativo. Ao adicionar animações a um botão, você pode fazer com que ele mude de cor, de tamanho, de forma ou de posição quando é clicado ou quando o cursor do mouse é passado sobre ele. Neste tutorial, vamos mostrar como criar alguns exemplos de botões animados usando HTML e CSS.
Exemplo 1: Botão com transição de cor
Este botão muda de cor quando o cursor do mouse é passado sobre ele. Para criar esse efeito, usamos a propriedade transition do CSS, que define uma transição suave entre dois estados de um elemento. O código HTML e CSS para o botão é o seguinte:
.botao{
background-color: #2196F3;
border: none;
color: #fff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.5s ease;
}
.botao:hover{
background-color: #4CAF50;
}
Exemplo 2: Botão com animação de rotação
Este botão gira em torno do seu eixo quando é clicado. Para criar esse efeito, usamos a propriedade transform do CSS, que permite aplicar transformações 2D e 3D a um elemento. O código HTML e CSS para o botão é o seguinte:
.botao{
background-color: #FFC107;
border: none;
color: #fff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
transition: transform 0.5s ease;
}
.botao:hover{
transform: rotate(360deg);
}
Exemplo 3: Botão com animação de pulsação
Este botão aumenta e diminui de tamanho em um loop quando o cursor do mouse é passado sobre ele. Para criar esse efeito, usamos a propriedade animation do CSS, que permite criar animações personalizadas com keyframes. O código HTML e CSS para o botão é o seguinte:
.botao{
background-color: #FFC107;
border: none;
color: #fff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.botao:hover {
animation: none;
}
Estes são apenas alguns exemplos de botões animados que você pode criar usando HTML e CSS. Existem muitas outras maneiras de adicionar animações a um botão, dependendo do efeito que você deseja alcançar. Lembre-se de que, ao adicionar animações ao seu site ou aplicativo, é importante equilibrar o efeito visual com a usabilidade e a experiência do usuário.
Dúvidas frequentes
Para criar um botão personalizado em HTML, você pode seguir os seguintes passos:
- Crie um elemento button em seu HTML:
- Adicione uma classe ou um ID ao botão, para que você possa estilizá-lo
- Defina o estilo do botão personalizado em seu CSS. Por exemplo, para criar um botão com uma cor de fundo azul e texto branco, você pode usar o seguinte CSS:
.botao-personalizado {background-color:blue; color:white;}
Para criar um botão com imagem HTML, você pode seguir os seguintes passos:
- Crie um elemento button em seu HTML:
- Adicione uma classe ou um ID ao botão, para que você possa estilizá-lo
- Defina o estilo do botão personalizado em seu CSS;
- E por fim para adicionar a imagem no botão pode seguir o código:
<button class=”botao-imagem”><img src=”” alt=”Texto Alternativo”></button>
Para criar um botão personalizado em CSS, você pode seguir os seguintes passos:
- Crie um elemento button em seu HTML:
- Adicione uma classe ou um ID ao botão, para que você possa estilizá-lo
- Defina o estilo do botão personalizado em seu CSS. Por exemplo, para criar um botão com uma cor de fundo azul e texto branco, você pode usar o seguinte CSS:
.botao-personalizado {background-color:blue; color:white;}
Pronto! Agora você tem um botão personalizado em seu CSS, com efeitos hover e ativo. Você pode adicionar outras propriedades CSS, como font-family, box-shadow e text-align, para personalizar ainda mais seu botão.
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
