Botão CSS
Nesta seção, nós introduzimos o uso de CSS para criar o botão.
Estilo Camiseta básica
Exemplos CSS
background-color: # 4CAF50; / * * Verde /
border: none;
cor: branco;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
tente »
cor do botão
Podemos usar o background-color propriedade para definir a cor dos botões:
Exemplos CSS
.button2 {background-color: # 008CBA;} / * Blue * /
.button3 {background-color: # f44336;} / * Red * /
.button4 {background-color: # e7e7e7; color: black;} / * cinza * /
.button5 {background-color: # 555555;} / * Black * /
tente »
botão Tamanho
Podemos usar o font-size propriedade para definir o tamanho do botão:
Exemplos CSS
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
tente »
botão arredondada
Podemos usar o border-radius propriedade para definir o botão filé:
Exemplos CSS
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
tente »
cor da borda botão
Podemos usar a border de propriedade de uma cor de borda botão:
Exemplos CSS
background-color: white;
color: black;
border: 2px solid # 4CAF50; / * * Verde /
}
...
tente »
Botão Hover
Podemos usar a :hover selector para modificar o estilo passando o mouse sobre o botão.
Dica: Podemos usar a transition-duration propriedade definida como "pairar" Velocidade efeito:
Exemplos CSS
-webkit-transição-duração: 0.4s; / * Safari * /
de transição de duração: 0.4s;
}
.button: hover {
background-color: # 4CAF50; / * * Verde /
cor: branco;
}
...
tente »
sombra botão
Podemos usar o box-shadow propriedade para adicionar uma sombra para o botão:
Exemplos CSS
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);
}
tente »
botão Desabilitar
Podemos usar a opacity propriedade para adicionar transparência (semelhante à "deficiente" atribuir efeitos) para o botão.
Dica: O que pode adicionar cursor propriedade e definido como "não-autorizados" para configurar uma imagem de pessoas com deficiência:
botão Largura
Por defeito, o tamanho do botão de texto no botão decidiu (com base no comprimento correspondente texto). Podemos usar a width propriedade para definir a largura do botão:
Dica: Se você quiser definir uma largura fixa pode usar pixels (px) como uma unidade, se você deseja definir botões sensíveis podem ser definidas como uma porcentagem.
Button Group
Retire do lado de fora e adicionar float:left jogo das teclas:
Com fronteira Button Group
Podemos usar a border propriedade para definir o grupo de botões com borda: