Styles de bouton dans Bootstrap 5 | Expliqué

L'insertion de boutons simples sur vos pages Web peut être ennuyeux. Leur donner un certain style s'ajoutera à l'embellissement de votre site Web. Si vous développez votre site Web à l'aide de Bootstrap 5, alors les boutons de style ne sont pas un problème. Diverses classes sont disponibles dans cette version bootstrap qui peut effectuer la tâche du style de bouton dans une seule ligne de code. Pour apprendre diverses façons de coiffer les boutons dans Bootstrap 5, lisez l'article jusqu'à la fin.

Ajout de couleurs aux boutons

Vous pouvez ajouter une couleur d'arrière-plan aux boutons qui non seulement leur ajoutent de la beauté, mais qui transmet également le but derrière le bouton. Pour ce faire, vous pouvez utiliser l'une de ces classes données qui sont, .btn, .btn-primaire, .succès du BTN, .btn-info, .btn-secondaire, .aval de btn, .danger btn, .BTN-DARK, .BTN-LIGHT.

Comment ajouter des couleurs au bouton à l'aide de bootstrap 5

Dans l'exemple ci-dessous, nous allons démontrer certaines des classes susmentionnées.

Html

Bouton
Bouton
Bouton

Le code ci-dessus génère trois boutons, d'abord avec un style de base, le second ayant une couleur d'arrière-plan vert et indiquant une action positive et la dernière ayant une couleur d'arrière-plan bleu et représentant une action importante. Notez que nous avons utilisé le .Classe BTN lors du style de chaque bouton car cela donne un certain rembourrage au bouton avec un style de base.

Sortir

Vous pouvez essayer d'autres cours pour voir comment ils coiffent les boutons.

Boutons comme liens

Vous pouvez également lier d'autres pages Web ou sources vers des boutons dans Bootstrap 5.

Comment rediriger un utilisateur vers une autre source à l'aide du bouton

Supposons que vous souhaitiez rediriger vos utilisateurs vers une autre source à l'aide d'un bouton.

Html

Lien

Ici, vous pouvez simplement fournir le lien de l'autre source à l'attribut HREF de la balise d'ancrage. De plus, le bouton créé dans l'extrait de code ci-dessus aura une couleur bleu clair et un style de base.

Sortir

Voici comment faire des boutons comme liens.

Bouton d'entrée

En dehors des balises d'ancrage, vous pouvez également utiliser les classes de bouton mentionnées ci-dessus sur les entrées. Comme vous le savez, la balise peut rendre certains types tels que la soumission ou la réinitialisation, vous pouvez donc appliquer le style à l'un de ces types d'entrée.

Comment appliquer des classes de bouton sur les entrées

Voici comment vous pouvez appliquer des classes de bouton sur les entrées.

Ce qui précède générera trois types de boutons d'entrée avec chaque bouton ayant une couleur d'arrière-plan différente.

Sortir

De cette façon, vous pouvez appliquer des classes associées aux boutons sur divers types d'entrée.

Dimensionnement des bouton

Dans certains scénarios, nous souhaitons faire des boutons élargis, en attendant, dans d'autres cas, nous voulons le contraire. En utilisant les classes liées aux tailles de boutons, nous pouvons réaliser cette tâche.

Comment modifier les tailles de bouton dans Bootstrap 5

Considérez l'exemple ci-dessous pour comprendre comment faire des boutons de différentes tailles.

Html

Petit
Moyen
Grand

Dans le code ci-dessus, nous générons respectivement trois boutons de petites tailles moyennes, moyennes et grandes. Tous les boutons ont également reçu un certain style.

Sortir

Ce sont des boutons de tailles variables.

Boutons décrits

Vous pouvez également décrire vos boutons en utilisant le .BTN-Outline classe en combinaison avec des cours de couleur pour coiffer vos boutons.

Comment donner un contour aux boutons dans bootstrap 5

Supposons que vous souhaitiez décrire votre bouton à l'aide de bootstrap 5, puis suivez l'extrait de code ci-dessous.

Soumettre

Ce qui précède générera un bouton avec un contour vert, en outre, lorsque vous apporterez la souris sur le bouton, un effet de survol sera appliqué qui lui fournira une couleur d'arrière-plan correspondant à la classe de couleur utilisée chaque fois que la souris est amenée.

Sortir

Le bouton a reçu un contour avec un effet de survol.

Boutons actifs et désactivés

Pour ajouter de la beauté à votre bouton, vous pouvez soit ajouter des états tels que actifs ou désactivés sur vos boutons ou styliser les états du bouton.

Comment faire un bouton diblé en bootstrap 5

Générons deux boutons, l'un avec un état actif et l'autre avec un état handicapé.

Html

Actif
Désactivé

Dans le code ci-dessus, le premier bouton a un style de base avec un fond bleu clair et un état actif, en attendant, le second a été désactivé et a le même style que le premier. De plus, les deux boutons ont une couleur de texte blanc.

Sortir

Ce sont des boutons avec les états actifs et handicapés.

Boutons au niveau du bloc

Dans le but de créer des boutons qui occupent tout l'espace horizontal, vous devez attribuer le .d-gride classe à la div contenant l'élément bouton, en attendant, attribuer le .bloc BTN classe à l'élément bouton.

Comment créer un bouton de niveau bloc à l'aide de bootstrap 5

Créons un bouton de niveau bloc.

Html

Bouton de niveau bloc

Ici, nous générons un bouton pleine largeur en utilisant le .Classe D-Grid sur l'élément parent qui le fait s'étendre sur toute la largeur de l'élément parent.

Sortir

La sortie ci-dessus montre un bouton de niveau bloc.

Conclusion

Les boutons peuvent être stylisés de plusieurs manières en utilisant les différentes classes Bootstrap 5 associées aux boutons. Par exemple, vous pouvez ajouter des couleurs aux boutons à l'aide de classes telles que .btn-primaire, .succès du BTN, .btn-info, etc. De plus, vous pouvez utiliser d'autres classes disponibles pour fabriquer des boutons comme liens, leur donner une certaine taille, un contour ou les rendre au niveau du blocage. Ce blog discute de divers styles que vous pouvez fournir aux boutons à l'aide de bootstrap 5.