Estilos de botão no bootstrap 5 | Explicado
Adicionando cores aos botões
Você pode adicionar uma cor de fundo aos botões que não apenas adiciona beleza a eles, mas também transmite o propósito por trás do botão. Para fazer isso, você pode usar qualquer uma dessas classes que são, .btn, .Btn-Primary, .Btn-success, .btn-info, .BTN-secundário, .Btn-Warning, .BTN Danger, .BTN-Dark, .BTN-LIGHT.
Como adicionar cores ao botão usando o bootstrap 5
No exemplo abaixo, vamos demonstrar algumas das classes mencionadas acima.
Html
O código acima gera três botões, primeiro com um estilo básico, segundo com uma cor verde de fundo e indicando uma ação positiva e a última com uma cor azul de fundo e representando uma ação importante. Observe que usamos o .Classe BTN ao modelar cada botão, pois isso fornece certos preenchimentos ao botão junto com um estilo básico.
Saída
Você pode tentar outras aulas para ver como elas estilizam os botões.
Botões como links
Você também pode vincular outras páginas ou fontes da web a botões no bootstrap 5.
Como redirecionar um usuário para outra fonte usando o botão
Suponha que você queira redirecionar seus usuários para outra fonte usando um botão.
Html
LinkAqui você pode simplesmente fornecer o link da outra fonte ao atributo href da tag de âncora. Além disso, o botão criado no snippet de código acima terá uma cor azul clara e um estilo básico.
Saída
Aqui está como você pode fazer botões como links.
Botão de entrada
Além das tags de ancoragem, você também pode usar as classes de botões acima mencionadas em entradas também. Como você sabe, a tag pode renderizar alguns tipos, como enviar ou redefinir, portanto, você pode aplicar o estilo a qualquer um desses tipos de entrada.
Como aplicar classes de botões em entradas
Aqui está como você pode aplicar classes de botões em entradas.
O exposto acima gerará três tipos de botões de entrada com cada botão com uma cor de fundo diferente.
Saída
Dessa forma, você pode aplicar classes associadas a botões em vários tipos de entrada.
Dimensionamento de botões
Em alguns cenários, desejamos fazer botões ampliados, enquanto isso, em outros casos, queremos o oposto. Usando as classes ligadas aos tamanhos dos botões, podemos alcançar esta tarefa.
Como alterar os tamanhos dos botões no bootstrap 5
Considere o exemplo abaixo para entender como fazer botões de vários tamanhos.
Html
No código acima, estamos gerando três botões de tamanhos pequenos, médios e grandes, respectivamente. Todos os botões também receberam um certo estilo.
Saída
Estes são botões de tamanhos variados.
Descrevendo botões
Você também pode delinear seus botões usando o .BTN-Outline Classe em combinação com aulas de cores para estilizar seus botões.
Como dar esboço aos botões no bootstrap 5
Suponha que você queira delinear seu botão usando o bootstrap 5 e siga o trecho de código abaixo.
O exposto acima gerará um botão com um contorno verde, além disso, quando você trazer o mouse sobre o botão, será aplicado um efeito de pairar que fornecerá uma cor de fundo correspondente à classe de cores usada toda vez que o mouse for trazido sobre ele.
Saída
O botão recebeu um esboço junto com um efeito de pairar.
Botões ativos e desativados
Para adicionar beleza ao seu botão, você pode adicionar estados como ativos ou desativados em seus botões ou estilizar os estados do botão.
Como fazer um botão com o botão em bootstrap 5
Vamos gerar dois botões, um com um estado ativo e o outro com um estado com deficiência.
Html
No código acima, o primeiro botão tem um estilo básico junto com um fundo azul claro e um estado ativo, enquanto isso, o segundo foi desativado e tem o mesmo estilo que o primeiro. Além disso, ambos os botões têm cor de texto em branco.
Saída
Estes são botões com os estados ativos e deficientes.
Botões no nível do bloco
Com o objetivo de criar botões que ocupam todo o espaço horizontal, você deve atribuir o .D-grade classe para a div, contendo o elemento do botão, enquanto isso, atribui o .BTN-BLOCK classe para o elemento do botão.
Como criar um botão de nível de bloco usando o bootstrap 5
Vamos criar um botão de nível de bloco.
Html
Aqui estamos gerando um botão de largura total usando o .Classe D-Grid no elemento pai que o faz abranger toda a largura do elemento pai.
Saída
A saída acima mostra um botão de nível de bloco.
Conclusão
Os botões podem ser estilizados de várias maneiras usando as várias classes Bootstrap 5 associadas aos botões. Por exemplo, você pode adicionar cores aos botões usando classes como .Btn-Primary, .Btn-success, .btn-info, etc. Além disso, você pode usar outras classes disponíveis para fazer botões como links, dar um certo tamanho, esboço ou torná-los no nível do bloco. Este blog discute vários estilos que você pode fornecer aos botões usando o bootstrap 5.