Estilo de botão no CSS | Explicado
- Mudando as cores dos botões
- Alterando os tamanhos dos botões
- Criando botões arredondados ou circulares
- Adicionando efeito de pairar aos botões
- Adicionando efeitos aos botões
- Adicionando sombras aos botões
- Botões desativados de estilo
Vamos começar.
Como mudar as cores dos botões
Com o objetivo de mudar as cores, mais especificamente, cores de fundo dos botões, a propriedade CSS Background-Color é usada. Abaixo, apresentamos a você um exemplo.
Html
Usando HTML básico, criamos um botão.
CSS
.btnBackground-Color: Rosybrown;
fronteira: nenhuma;
cor branca;
preenchimento: 20px 35px;
Size da fonte: 16px;
Além de dar ao botão um certo preenchimento, borda e tamanho da fonte, definimos a cor do fundo para o marrom rosado. Você pode mudar a cor de acordo com o seu desejo.
Saída
Um botão com uma cor de fundo marrom rosado foi criado.
Se você deseja adicionar cores apenas à borda do botão, use a propriedade da fronteira CSS.
CSS
.btncor de fundo: branco;
borda: 2px azul sólido;
cor preta;
preenchimento: 25px;
Size da fonte: 16px;
No código acima, estamos definindo a cor de fundo para o branco, enquanto isso, a borda sólida recebe um comprimento de 2px com cor azul.
Saída
Um botão com borda azul foi gerado.
Como alterar os tamanhos dos botões
Pode haver várias maneiras de alterar o tamanho do botão e todas as maneiras possíveis são descritas abaixo, juntamente com os exemplos apropriados e para o ponto.
Método 1: alterando o preenchimento dos botões
A primeira e mais usada a maneira de alterar o tamanho de um botão é usando a propriedade de preenchimento. Diferentes preenchimentos resultarão em diferentes tamanhos de um botão.
CSS
.btnBackground-Color: Rosybrown;
fronteira: nenhuma;
cor branca;
Size da fonte: 16px;
.BTN1
preenchimento: 10px 24px;
.BTN2
preenchimento: 32px 16px;
Os lados superior e inferior do primeiro botão receberam preenchimento de 10px, enquanto isso a direita, e os lados esquerdo recebem preenchimento de 24px. Quanto ao segundo botão, a parte superior e os lados inferiores são fornecidos com preenchimento de 32px cada, enquanto a direita e os lados esquerdo são dados com preenchimento de 16 px.
Saída
Botões com vários padrões foram criados.
Método 2: alterando o tamanho da fonte
Outra maneira de alterar o tamanho de um botão é alterar o tamanho da fonte do botão TE. Ao aumentar ou diminuir o tamanho da fonte, o tamanho do botão é afetado. Quanto maior o tamanho da fonte, maior o botão. Considere o trecho de código abaixo.
Html
Aqui, criamos dois botões para demonstrar a diferença entre vários tamanhos das fontes e como eles afetam os tamanhos dos botões.
CSS
.btnBackground-Color: Rosybrown;
fronteira: nenhuma;
cor branca;
preenchimento: 20px 35px;
.BTN1
tamanho de fonte: 12px;
.BTN2
Size da fonte: 24px;
Ambos os botões foram atribuídos a mesma cor de fundo, cor, borda e preenchimento. No entanto, o primeiro botão foi atribuído o tamanho da fonte de 12px e o outro botão 24px.
Saída
Os botões com vários tamanhos foram criados com sucesso.
Método 3: Alterando a largura dos botões
Outra maneira de alterar o tamanho de um botão é ajustando sua largura. Siga o exemplo abaixo.
CSS
.btnBackground-Color: Rosybrown;
fronteira: nenhuma;
cor branca;
preenchimento: 20px 35px;
exibição: bloco;
margem: 5px 3px;
Size da fonte: 16px;
.BTN1
largura: 20%;
.BTN2
largura: 50%;
Com o objetivo de exibir cada um dos botões em uma nova linha, estamos convertendo-os em elementos no nível do bloco e definindo suas margens. Além disso, a largura do primeiro botão é definida para 20%, enquanto a largura do segundo botão é definida como 50%.
Saída
Botões com várias larguras foram criados com sucesso.
Como criar botões arredondados ou circulares
Para criar botões arredondados ou circulares, use a propriedade CSS Border-Radius. Nós apresentamos um exemplo abaixo.
CSS
.btnBackground-Color: Rosybrown;
fronteira: nenhuma;
cor branca;
preenchimento: 25px;
Size da fonte: 16px;
.BTN1
Radio de fronteira: 8px;
.BTN2
Radio de fronteira: 50%;
No código acima, com o objetivo de arredondar apenas os cantos do botão, estamos dando ao Radius de fronteira um valor em pixels. No entanto, para tornar o botão um círculo completo, damos ao radiato de fronteira um valor em porcentagem.
Saída
Um botão arredondado e circular foi criado com grande facilidade.
Como adicionar efeito feminino aos botões
Para tornar seus botões mais interessantes, você pode adicionar um efeito feminino a eles para tornar sua aparência mais atraente. Use o trecho de código abaixo.
CSS
.btncor de fundo: branco;
Fronteira: 2px Solid Rosybrown;
cor preta;
preenchimento: 25px;
Size da fonte: 16px;
.BTN: Hover
Background-Color: Rosybrown;
cor branca;
Antes do efeito pairar, o botão foi estilizado usando várias propriedades CSS. Enquanto isso, uma vez que o usuário traga o mouse sobre o botão, a cor do plano de fundo mudará para marrom rosado e a cor da fonte para branca.
Saída
Um botão com um efeito de pairar foi gerado.
Outra coisa divertida que você pode fazer é que você especifica a duração da transição do efeito pairar para torná-lo mais atraente usando a propriedade de duração da transição.
CSS
.btncor de fundo: branco;
Fronteira: 2px Solid Rosybrown;
cor preta;
preenchimento: 25px;
Size da fonte: 16px;
Duração da transição: 0.5s;
.BTN: Hover
Background-Color: Rosybrown;
cor branca;
A duração da transição foi definida como 0.5 segundos.
Saída
Um efeito de pairar com uma duração de transição foi adicionado com sucesso.
Como adicionar um desbotamento em vigor aos botões
Fade in Effects são usados junto com efeitos de pairar e estes podem ser adicionados aos botões usando a propriedade Opacity. Aqui está um exemplo.
CSS
.btnBackground-Color: Rosybrown;
fronteira: nenhuma;
cor branca;
preenchimento: 30px;
Size da fonte: 16px;
Opacidade: 0.4;
Duração da transição: 0.5s;
.BTN: Hover
opacidade: 1;
Antes do efeito do pairar, a opacidade do botão foi definida como 0.4. Considerando que, quando o efeito do hover em.5 segundos.
Saída
Um desbotamento em vigor foi implementado com sucesso.
Hwo para adicionar sombras aos botões
Usando a propriedade de sombra de caixa, as sombras podem ser adicionadas aos botões para aprimorar sua beleza. Siga o exemplo abaixo mencionado.
CSS
.btnBackground-Color: Rosybrown;
fronteira: nenhuma;
cor branca;
preenchimento: 30px;
Size da fonte: 16px;
Duração da transição: 0.5s;
Shadow de caixa: 0 5px 10px 0 cinza;
No código acima, estamos adicionando uma sombra de cor cinza e atribuímos cada lado da sombra algum comprimento.
Saída
Uma sombra foi adicionada com sucesso ao botão.
Observação: Você também pode adicionar um efeito de pairar junto com a sombra para tornar o botão mais atraente.
Como estilizar deficientes-butões
Para fazer um botão Desativar, precisamos mencionar um atributo desativado para a tag de botão em HTML, conforme mostrado no trecho HTML abaixo:
Para fins de estilo de botões desativados, você pode usar duas propriedades CSS que são: opacidade e cursor. Abaixo, demonstramos como você pode criar um botão desativado.
CSS
.btnBackground-Color: Rosybrown;
fronteira: nenhuma;
cor branca;
preenchimento: 30px;
Size da fonte: 16px;
Duração da transição: 0.5s;
Opacidade: 0.4;
Cursor: não superado;
Para criar um botão desativado, a opacidade do botão foi para 0.4 e o cursor a não ser permitido.
Saída
Um botão desativado foi gerado.
Conclusão
Adicionar botões simples às suas páginas da web pode ser um pouco chato, no entanto, estilizando -os usando várias propriedades CSS pode melhorar sua aparência geral. Propriedades como cor de fundo, cor, radiato de fronteira, opacidade, preenchimento, largura, sombra de caixa e assim por diante podem ser úteis ao fornecer um certo estilo aos botões. Além disso, você também pode adicionar vários efeitos aos botões, como pairar, ou desaparecer, etc. Além disso, você também pode animar esses efeitos usando a propriedade de transição. Esta postagem guia sobre várias maneiras pelas quais você pode estilizar seus botões com a ajuda de exemplos.