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 -