2.9 KiB
title | localeTitle |
---|---|
CSS Buttons | Botões CSS |
Botões CSS
- Você pode estilizar qualquer botão clicável (elemento HTML
<button>
)
<button>Click Me</button>
- O botão padrão é semelhante ao seguinte:
Estilizando um botão
Você pode alterar várias propriedades de um botão para alterar sua aparência.
Para adicionar sombras ao botão, use box-shadow
propriedade box-shadow
.
Para adicionar transparência a um botão para um efeito desabilitado, use a opacity
da propriedade.
Para remover as margens e criar um grupo de botões, adicione float:left/right
property.
Para criar um grupo de botões, mas com as bordas, use a propriedade float
e adicione uma border property
.
Para criar um grupo vertical de botões, use display: block property
.
Cor do botao
Para alterar a cor de fundo de um botão, use a propriedade background-color:
button {background-color: #6ba0f4;}
Para adicionar uma borda colorida a um botão, use a propriedade border:
button {
background-color: #FFF;
color: #FFF;
border: 2px solid #6ba0f4;
}
Tamanho do texto do botão
Para alterar o tamanho da fonte do texto de um botão, use a propriedade font-size:
button {font-size: 20px;}
Botão de preenchimento
Para alterar o preenchimento de um botão, use a propriedade padding:
button {padding: 15px 30px;}
Largura do Botão
Para alterar a largura de um botão, independentemente do conteúdo do texto, use a propriedade width:
button {width: 250px;}
Botões Arredondados
Para criar botões arredondados, use a propriedade border-radius:
button {border-radius: 50%;}
Botões flutuantes
Para alterar o estilo de um botão ao passar o mouse sobre ele, use o seletor em foco:
button:hover {
background-color: #0E2C5B;
color: #FFF;
}
Para determinar a velocidade do efeito de foco, use a transition-duration
da propriedade.
Botões desativados
Para desabilitar um botão, use a propriedade do cursor:
button {
cursor: not-allowed;
}
Mais Informações:
- https://www.w3schools.com/css/css3_buttons.asp
- https://www.w3schools.com/howto/howto css animate_buttons.asp