Les boutons

jdb-button

Exemples de création de boutons avec JdB.CSS

JdB.CSS inclut un style de boutons prédéfini, et il est facile à utiliser et à personnaliser.

La classe jdb-button et la classe jdb-btn ajoutent un style de bouton à tous les éléments HTML.

Voici quelques exemples pour vous aider à vous faire une idée de la façon de construire des composants en utilisant JdB.CSS :

Commençons par un simple bouton qui utilise la classe CSS jdb-button ou jdb-btn pour les bouton avec une ombre au survol du curseur :
 
 
Code :
<button class="jdb-button">Bouton 1</button>
<button class="jdb-btn">Bouton 2</button>

Exemples avec d'autres éléments (input, div, span, a) :

Code :

<input class="jdb-button" type="button" value="Bouton input">
<div class="jdb-button" tabindex="0">Bouton div</div>
<span class="jdb-button" tabindex="0">Bouton span</span>
<a href="https://css.bruxelles.dev" class="jdb-button">Bouton lien</a>

Quelques personnalisations :

En ajoutant une classe de couleur telle que jdb-blue, vous pouvez modifier la couleur :
 
Code :
<button class="jdb-button jdb-blue">Bouton</button>

Toutes les classes de couleurs JdB.CSS peuvent être utilisées pour ajouter de la couleur aux boutons. En savoir plus sur les couleurs

Vos boutons peuvent avoir une bordure à l'aide de la classe jdb-border :
 
Code :
<button class="jdb-button jdb-border">Bouton</button>

Des boutons focalisable :
 
Code :
<button class="jdb-button jdb-border jdb-focusable">Cliquez ici</button>

Des boutons liens :
 Ouvrir le lien
Code :
<a class="jdb-btn-link" href="#">Ouvrir le lien</a>

Ils peuvent aussi être arrondis à l'aide des classes jdb-round-x  :
 
Code :
<button class="jdb-button jdb-border jdb-round">Bouton 1</button>
<button class="jdb-button jdb-blue jdb-round-xxl">Bouton</button>

La classe jdb-circle peut être utilisée pour créer des boutons circulaires ?
  
Code :
<button class="jdb-button jdb-circle jdb-xlarge jdb-blue">+</button>
<button class="jdb-button jdb-circle jdb-xlarge jdb-pink">+</button>

Un bouton désactivé :
 
Code :
<button class="jdb-button jdb-blue jdb-disabled" disabled>Bouton</button>

Du 3D, c'est possible :
 
Code :
<button class="jdb-button jdb-light-gray jdb-bottombar">Bouton 3D</button>

De l'élevation, c'est aussi possible :
 
Code :
<button class="jdb-button jdb-blue jdb-card">Bouton surélevé</button>

De l'élevation au survol ? Utilisez plutôt la classe jdb-btn.
 
Code :
<button class="jdb-btn jdb-blue">Bouton surélevable</button>

Les boutons peuvent être à pleine largeur avec la classe jdb-btn-block :
 
Code :
<button class="jdb-btn-block jdb-blue">Bouton plein</button>

Les boutons avec effet de clique avec la classe jdb-ripple :
 
Code :
<button class="jdb-button jdb-ripple jdb-blue">Cliquez ici</button>

Changer de couleur au survol ?
 
Code :
<button class="jdb-button jdb-pale-blue jdb-text-blue jdb-hover-blue jdb-border jdb-border-blue">Survolez ici</button>

Le classe .jdb-left et la classe .jdb-right peuvent être utilisées pour faire flotter les boutons vers la gauche ou vers la droite (pour créer des boutons de navigation "précédent/suivant" par exemple) :
  
Code :
<div class="jdb-bar jdb-light-gray">
  <button class="jdb-button jdb-bar-item jdb-gray jdb-hover-gray">Précédent</button>
  <button class="jdb-button jdb-bar-item jdb-gray jdb-hover-gray">Suivant</button>
</div>

Des boutons groupés avec les classes jdb-bar et jdb-bar-item...
  
Code :
<div class="jdb-bar">
  <button class="jdb-button jdb-bar-item jdb-indigo">Précédent</button>
  <button class="jdb-button jdb-bar-item jdb-teal">Suivant</button>
</div>

Les boutons peuvent être espacés en retirant les classes jdb-bar-item :
  
Code :
<div class="jdb-bar">
  <button class="jdb-button jdb-indigo">Précédent</button>
  <button class="jdb-button jdb-teal">Suivant</button>
</div>

Des boutons groupés séparés par une bordure avec les classes jdb-rounded ou jdb-bordered-items...
  
Code :
<div class="jdb-bar jdb-rounded">
  <button class="jdb-button jdb-bar-item jdb-light-gray jdb-hover-gray">Précédent</button>
  <button class="jdb-button jdb-bar-item jdb-light-gray jdb-hover-gray">Suivant</button>
</div>

Des boutons groupés focalisables tout-en-un... Cliquez pour voir le focus :
  
Code :
<div class="jdb-bar jdb-rounded jdb-focusable-buttons jdb-padding-small">
  <button class="jdb-button jdb-bar-item jdb-light-gray jdb-hover-gray">Précédent</button>
  <button class="jdb-button jdb-bar-item jdb-light-gray jdb-hover-gray">Suivant</button>
</div>

Les barres de boutons peuvent être centrées à l'aide de la classe jdb-center :...

Code :

<div class="jdb-center">
  <div class="jdb-bar">
    <button class="jdb-button jdb-light-gray">Bouton 1</button>
    <button class="jdb-button jdb-gray">Bouton 2</button>
    <button class="jdb-button jdb-dark-gray">Bouton 3</button>
  </div>
</div>

Les boutons peuvent contenir des icons :
 
Code :
<button class="jdb-button jdb-blue"><i class="fa fa-clipboard" aria-hidden="true"></i> Copier</button>
<button class="jdb-button jdb-green">Envoyer <i class="fa fa-send" aria-hidden="true"></i></button>
<button class="jdb-button jdb-green"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Envoi en cours</button>

Un bouton peut être formaté pour créer un lien vers un réseau social :
   Facebook    Twitter       YouTube    Spotify    GitHub 
Code :
<a class="jdb-button jdb-margin-4 jdb-round jdb-text-white" href="https://facebook.com" style="background-color:#3b5998">
  <i class="fa fa-facebook-f" aria-hidden="true"></i> Facebook
</a>
<a class="jdb-button jdb-margin-4 jdb-round jdb-blue" href="https://twitter.com">
  <i class="fa fa-twitter" aria-hidden="true"></i> Twitter
</a>
<a class="jdb-button jdb-margin-4 jdb-round jdb-black" href="https://twitter.com">
  <i class="fab fa-x-twitter" aria-hidden="true"></i>
</a>
<a class="jdb-button jdb-margin-4 jdb-round jdb-red" href="https://youtu.be">
  <i class="fa fa-youtube" aria-hidden="true"></i> YouTube
</a>
<a class="jdb-button jdb-margin-4 jdb-round jdb-green" href="https://spotify.com" target="_blank">
  <i class="fa fa-spotify" aria-hidden="true"></i> Spotify
</a>
<a class="jdb-button jdb-margin-4 jdb-round jdb-black" href="https://github.com">
  <i class="fa fa-github" aria-hidden="true"></i> GitHub
</a>

Un bouton peut apparaître à côté d'une étiquette :
2,046
Code :
<div class="jdb-bar jdb-rounded jdb-padding-small">
  <button class="jdb-button jdb-bar-item jdb-focusable jdb-light-gray jdb-text-gray jdb-border jdb-hover-gray">
    <i class="fa fa-heart" aria-hidden="true"></i> Like
  </button>
  <div class="jdb-button jdb-bar-item jdb-white jdb-border">2,046</div>
</div>

Vous pouvez également modifier la taille :
.jdb-tiny
.jdb-small, .jdb-sm
.jdb-medium, .jdb-md
.jdb-large, .jdb-lg
.jdb-xlarge, .jdb-xl
.jdb-xxlarge, .jdb-xxl
.jdb-xxxlarge, .jdb-xxxl
.jdb-jumbo
Plus d'infos sur les tailles de textes
 

 

 

 

 

...
Code :
<button class="jdb-button jdb-blue jdb-tiny">Bouton</button>
<button class="jdb-button jdb-blue jdb-small">Bouton</button>
<button class="jdb-button jdb-blue jdb-medium">Bouton</button>
<button class="jdb-button jdb-blue jdb-large">Bouton</button>
<button class="jdb-button jdb-blue jdb-xlarge">Bouton</button>
<button class="jdb-button jdb-blue jdb-xxlarge">Bouton</button>
<button class="jdb-button jdb-blue jdb-xxxlarge">Bouton</button>
<button class="jdb-button jdb-blue jdb-jumbo">Bouton</button>