Boutons CSS - Utilisation des boutons sociaux
La bibliothèque de boutons sociaux est un ensemble de boutons CSS créés en CSS pur et basés sur Bootstrap et Font Awesome.
Chargement des boutons sociaux
Pour charger la bibliothèque bootstrap-social.css, téléchargez le bootstrap-social.css à partir de github et collez la ligne suivante dans la section <head> de la page Web.
<head>
<link rel = "stylesheet" href = "bootstrap-social.css">
</head>Utilisation du bouton
Créez un bouton à l'aide de la balise d'ancrage html et ajoutez des styles btn, btn-block avec le spécificateur social btn-social.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
</head>
<body>
<a class = "btn btn-block btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
</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/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
</head>
<body>
<a class = "btn btn-block btn-lg btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-md btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-sm btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-xs btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
</body>
</html>Il produira la sortie suivante -
Utilisation des icônes uniquement
L'exemple suivant montre comment choisir des boutons d'icône uniquement.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "bootstrap-social.css">
</head>
<body>
<a class = "btn btn-social-icon btn-twitter">
<span class = "fa fa-twitter"></span>
</a>
</body>
</html>Il produira la sortie suivante -