Boutons CSS - Utilisation de bttn.css

La bibliothèque bttn.css fournit une énorme collection de styles simples pour les boutons. Cette bibliothèque est entièrement gratuite pour un usage personnel et commercial. Ces boutons peuvent être personnalisés facilement.

Chargement du bttn.css

Pour charger la bibliothèque btns.css, accédez au lien btns.css et collez la ligne suivante dans la section <head> de la page Web.

<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>

Utilisation du bouton

Créez un bouton à l'aide de la balise de bouton html et ajoutez des styles bttn-slant, bttn-royal avec le spécificateur de taille bttn-lg.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-slant">Submit</button>
   </body>
</html>

Il produira la sortie suivante -

Définition de la taille

Vous pouvez augmenter ou diminuer la taille d'un bouton en définissant sa taille à l'aide de CSS et en l'utilisant avec le nom de la classe, comme indiqué ci-dessous. Dans l'exemple donné, nous avons modifié quatre tailles.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg">Large</button>
      <button class = "bttn-pill bttn-md">Medium</button>
      <button class = "bttn-pill bttn-sm">Small</button>
      <button class = "bttn-pill bttn-xs">Extra Small</button>
   </body>
</html>

Il produira la sortie suivante -

Définition de la couleur

Tout comme la taille, vous pouvez définir la couleur du bouton en utilisant CSS. L'exemple suivant montre comment changer la couleur du bouton.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
      <button class = "bttn-pill bttn-md bttn-warning">Warning</button>
      <button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
      <button class = "bttn-pill bttn-xs bttn-success">Success</button>
      <button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
   </body>
</html>

Il produira la sortie suivante -