Créer des boutons de partage social animés | HTML, CSS3, Font Awesome

Introduction

Dans ce Lab, vous apprendrez à créer des boutons de partage social animés en utilisant HTML et CSS3. Ces boutons utilisent la bibliothèque Font Awesome pour les icônes et sont stylisés avec CSS pour offrir un effet de transition fluide au survol. À la fin de ce guide, vous disposerez d'un ensemble de boutons sociaux beaux et réactifs que vous pourrez intégrer à n'importe quel site web.

Présentation des icônes

Pour utiliser les icônes Font Awesome, il suffit d'utiliser le préfixe "fa" suivi du nom de l'icône.

Le format spécifique est le suivant : <i class="fa NOM_ICÔNE"></i>

Pour introduire les icônes nécessaires depuis la bibliothèque d'icônes, écrivez le code suivant dans le fichier index.html :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animated Social Sharing Buttons</title>

    <!--Bibliothèque d'icônes-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <div>
      <i class="fa fa-facebook"></i>
      <i class="fa fa-twitter"></i>
      <i class="fa fa-google"></i>
      <i class="fa fa-instagram"></i>
      <i class="fa fa-pinterest"></i>
    </div>
  </body>
</html>

Le résultat est le suivant :

L'utilisation de sélecteurs de pseudo-classes permet de modifier le style lorsque la souris survole l'objet lié. Par conséquent, nous ajoutons un lien vide à l'icône, ou vous pouvez lier aux pages d'accueil respectives des réseaux sociaux.

Syntaxe des pseudo-classes : sélecteur:pseudo-classe {propriété:valeur;}

a:hover {propriété:valeur;} définit le style affiché lorsque la souris survole le lien.

Définissez les sélecteurs de classe nécessaires pour faciliter le style ultérieur des boutons respectifs.

<div class="social-btns">
  <a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
  <a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
  <a class="btn google" href="#"><i class="fa fa-google"></i></a>
  <a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
  <a class="btn pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>

Aperçu de l'effet :

Les icônes Font Awesome deviennent bleues car après avoir appliqué la balise <a>, la couleur de police par défaut est bleue.

Paramétrage du style des icônes

Avant de paramétrer le style des icônes, nous ajoutons la feuille de style style.css dans la balise <head> de index.html.

<link rel="stylesheet" href="style.css" />

Pour standardiser le style global, définissons un style global dans style.css.

/* Paramètres de style global */
* {
  margin: 0;
  padding: 0;
}
a,
img {
  border: 0;
}
body {
  background: #eee;
}

Pour embellir les icônes vectorielles fournies par la police Font Awesome, commençons par définir leurs couleurs.

.social-btns.btn.facebook.fa {
  color: #3b5998;
}
.social-btns.btn.twitter.fa {
  color: #00aff0;
}
.social-btns.btn.google.fa {
  color: #dc4a38;
}
.social-btns.btn.instagram.fa {
  color: #bf00ff;
}
.social-btns.btn.pinterest.fa {
  color: #cc0000;
}

Aperçu de l'effet :

Ensuite, nous allons paramétrer l'icône pour qu'elle grossisse instantanément au toucher et change de couleur. Pour l'effet de grossissement instantané, nous pouvons utiliser transform: scale(0.8) pour réduire l'icône à 80 % de sa taille d'origine, et lorsque l'événement de toucher se produit, elle est redimensionnée à sa taille d'origine en utilisant transform: scale(1).

Entrez le code suivant dans le fichier style.css :

.social-btns.btn.fa {
  /* Définir le style d'affichage par défaut du lien */
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.social-btns.btn:focus.fa, /* Sélectionner le style du bouton en focus */
.social-btns.btn:hover.fa {
  /* Définir le style d'affichage du lien au survol de la souris */
  color: #fff; /* Changer sa couleur */
  -webkit-transform: scale(1);
  transform: scale(1);
}
.social-btns.btn.fa {
  /* Définir la taille et l'alignement vertical des icônes fournies par Font Awesome */
  font-size: 38px;
  vertical-align: middle;
}

Aperçu de l'effet :

Paramétrage du style des boutons

Pour organiser la mise en page de la page, nous centrons les boutons sur la page, les définissons comme des éléments en ligne de niveau bloc, puis nous embellissons les boutons.

L'attribut display spécifie le type d'élément à générer :

display:inline le définit comme un élément en ligne, partageant une ligne avec d'autres éléments, c'est-à-dire ne occupant pas une ligne exclusivement.
display:block le définit comme un élément de niveau bloc et occupe une ligne exclusivement.
display:inline-block combine les deux méthodes ci-dessus pour le définir comme un élément de niveau bloc qui n'occupe pas une ligne exclusivement.

.social-btns {
  height: 90px;
  margin: 80px auto;
  font-size: 0;
  text-align: center; /* centrage horizontal */
}
.social-btns.btn {
  display: inline-block; /* définir le bouton comme un élément de niveau bloc qui n'occupe pas une ligne exclusivement */
  background-color: #fff;
  width: 90px;
  height: 90px;
  line-height: 90px; /* définir la hauteur de ligne */
  margin: 0 10px;
  text-align: center;
  position: relative; /* définir en positionnement relatif */
  overflow: hidden; /* masquer le contenu débordant */
  border-radius: 28%; /* arrondir les coins de la DIV */
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); /* ajouter une ombre à l'élément DIV */
  opacity: 0.99; /* spécifier l'opacité. De 0.0 transparent à 1.0 complètement opaque */
}

Aperçu de l'effet :

Nous constatons que lorsque le bouton est touché, à la fois l'icône et le fond du bouton sont blancs, ce qui n'est pas facile à voir clairement. Donc, nous devons définir le style au toucher du fond du bouton. Tout d'abord, nous devons faire pivoter le btn:before de 45° dans le sens des aiguilles d'une montre en utilisant transform: rotate(45deg). Ensuite, ajuster les positions initiale et finale de btn:before.

Sélecteur before : Insère un nouveau contenu avant le contenu de l'élément.

.social-btns.btn:before {
  /*Définir les valeurs de haut et de gauche avant le contenu de chaque élément btn, c'est-à-dire la position du btn lorsqu'il n'est pas touché*/
  top: 90%;
  left: -110%;
}
.social-btns.btn:focus:before,
.social-btns.btn:hover:before {
  /*Ajuste la position du bouton lorsqu'il est touché*/
  top: -10%;
  left: -10%;
}
.social-btns.btn:before {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  /*Faire pivoter btn:before de 45° dans le sens des aiguilles d'une montre*/
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*Définir la couleur de btn:before, c'est-à-dire la couleur de fond du bouton après avoir été touché*/
.social-btns.btn.facebook:before {
  background-color: #3b5998;
}
.social-btns.btn.twitter:before {
  background-color: #00aff0;
}
.social-btns.btn.instagram:before {
  background-color: #bf00ff;
}
.social-btns.btn.google:before {
  background-color: #dc4a38;
}
.social-btns.btn.pinterest:before {
  background-color: #cc0000;
}

Aperçu de l'effet :

Enfin, nous effectuons des ajustements de transition sur les boutons, en utilisant principalement l'attribut transition-timing-function pour définir la courbe de vitesse de l'effet de transition afin de le rendre visuellement plus fluide.

Syntaxe de transition-timing-function :

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]>, <number>, <number [0,1]>, <number> )

Ajoutez le style suivant à style.css :

.social-btns.btn,
.social-btns.btn:before,
.social-btns.btn.fa {
  transition: all 0.35s; /* tous les styles en douceur pendant 0.35 secondes */
  transition-timing-function: cubic-bezier(
    0.31,
    -0.105,
    0.43,
    1.59
  ); /* spécifier la vitesse de l'effet de transition */
}

Aperçu de l'effet :

Note : Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Extension des connaissances

Non seulement pouvons-nous définir l'effet au survol d'un lien hypertexte, mais nous pouvons également utiliser des sélecteurs de pseudo-classes pour définir des effets pour les liens hypertextes non visités, visités et sélectionnés.

a:link {attribut: valeur;} définit l'effet pour les liens hypertextes non visités.
a:visited {attribut: valeur;} définit l'effet pour les liens hypertextes visités.
a:active {attribut: valeur;} définit l'effet pour les liens hypertextes sélectionnés.

Résumé

Dans ce Lab, nous avons appris les points suivants :

Références de la bibliothèque d'icônes Font Awesome
Sélecteurs de pseudo-classes CSS
Propriétés de transformation CSS
L'attribut display
Sélecteur before

Ce Lab utilise le CSS pour transformer une icône statique en un bouton avec des effets dynamiques. Le CSS peut non seulement définir un style uniforme pour les styles répétés afin d'améliorer l'efficacité du développement web, mais aussi configurer une variété d'éléments selon les besoins de la page web pour atteindre le but d'embellir la page web et d'améliorer la satisfaction de l'utilisateur.

Boutons de partage social animés avec CSS

Introduction

Présentation des icônes

Paramétrage du style des icônes

Paramétrage du style des boutons

Résumé