Botões CSS
- Página anterior Máscaras CSS
- Próxima página Paginação CSS
Aprender como usar CSS para definir o estilo dos botões.
Estilo básico do botão
Exemplo
.button {
cor-fundo: #4CAF50; /* Verde */
border: none;
cor: branco;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Cor do botão
Use background-color Atributo altera a cor de fundo do botão:
Exemplo
.button1 {background-color: #4CAF50;} /* Verde */
.button2 {background-color: #008CBA;} /* Azul */
.button3 {background-color: #f44336;} /* Vermelho */
.button4 {background-color: #e7e7e7; color: black;} /* Cinza */
.button5 {background-color: #555555;} /* Preto */
Tamanho do botão
Use font-size Atributo altera o tamanho da fonte do botão:
Exemplo
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Use padding Atributo altera a margem interna do botão:
Exemplo
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Botão arredondado
Use border-radius Atributo adiciona arredondamento ao botão:
Exemplo
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
borda colorida do botão
Use border propriedade para adicionar borda colorida ao botão:
Exemplo
.button1 {
cor-fundo: branco;
cor: preto;
borda: 2px sólida #4CAF50; /* Verde */
}
...
botão suspenso
ao passar o mouse sobre o botão, use :hover seletor pode alterar o estilo do botão.
dica:Use duração-de-transição propriedade para determinar a velocidade do efeito "passar o mouse":
Exemplo
.button {
duração-de-transição: 0.4s;
}
.button:hover {
cor-fundo: #4CAF50; /* Verde */
cor: branco;
}
...
botão com sombra
Use box-shadow propriedade para adicionar sombra ao botão:
Exemplo
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
botão desativado
Use opacidade propriedade para adicionar transparência ao botão (criar aparência de desativado).
dica:Você também pode adicionar um com o valor "não permitido" cursor propriedade, quando você passa o mouse sobre o botão, essa propriedade exibirá um sinal de proibição de estacionamento (sinal de proibição de estacionamento):
Exemplo
.disabled {
opacidade: 0.6;
cursor: não permitido;
}
largura do botão
Por padrão, o tamanho do botão depende do conteúdo do texto (igual à largura do conteúdo). Use largura propriedades para alterar a largura do botão:
Exemplo
.button1 {largura: 250px;}
.button2 {largura: 50%;}
.button3 {largura: 100%;}
grupos de botões
Remova o margem externo e adicione float:leftpara criar grupos de botões:
Exemplo
.button {
float: left;
}
Grupo de botões com borda
Usar border Propriedade para criar grupos de botões com borda:
Exemplo
.button {
float: left;
border: 1px solid green;
}
Grupo de botões verticais
Usar display:block Substituir float:left Classificar os botões em grupos verticais, em vez de lado a lado:
Exemplo
.button {
display: block;
}
Botão animado
Exemplo 1
Adicionar seta ao passar o mouse:
Exemplo 2
Adicionar efeito de 'pressionado' ao clique:
Exemplo 3
Desvanecer ao passar o mouse:
Exemplo 4
Adicionar efeito de 'ondulação' ao clique:
- Página anterior Máscaras CSS
- Próxima página Paginação CSS
