Boutons CSS - Utilisation des boutons Pushy
La bibliothèque Pushy Buttons est une petite bibliothèque CSS Pressable Buttons.
Chargement du bttn.css
Pour charger la bibliothèque pushy-buttons.min.css, téléchargez le css depuis github et collez la ligne suivante dans la section <head> de la page Web.
<head>
<link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>Utilisation du bouton
Créez un bouton à l'aide de la balise de bouton html et ajoutez des styles btn, btn-blue avec le spécificateur de taille btn-lg.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--blue">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 = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--blue">Large</button>
<button class = "btn btn--df btn--blue">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
<button class = "btn btn--sm btn--blue">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 = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--red">Large</button>
<button class = "btn btn--df btn--green">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
</body>
</html>Il produira la sortie suivante -