Boutons CSS - Utilisation de btns.css
La bibliothèque de boutons btns.css est un ensemble de boutons CSS qui utilisent des transitions fluides.
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 = "btns.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/btns.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/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Large</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/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-red">Red</button>
<button class = "btn btn-lg btn-blue">Blue</button>
<button class = "btn btn-lg btn-green">Green</button>
<button class = "btn btn-lg btn-sea">Sea</button>
<button class = "btn btn-lg btn-yellow">Yellow</button>
<button class = "btn btn-lg btn-orange">Orange</button>
<button class = "btn btn-lg btn-purple">Purple</button>
<button class = "btn btn-lg btn-black">Black</button>
<button class = "btn btn-lg btn-cloud">Cloud</button>
<button class = "btn btn-lg btn-grey">Grey</button>
</body>
</html>Il produira la sortie suivante -
Définition du style
Tout comme la taille, la couleur, vous pouvez définir le style du bouton en utilisant CSS. L'exemple suivant montre comment modifier le style du bouton.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Regular</button>
<button class = "btn btn-lg btn-blue btn-round">Round</button>
<button class = "btn btn-lg btn-blue btn-raised">Raised</button>
<button class = "btn btn-blue btn-sm">Small</button>
<button class = "btn btn-lg btn-outline-blue ">Outlined</button>
</body>
</html>Il produira la sortie suivante -