Comment créer : bouton d'icône

Comment créer un bouton d'icône

Étape 1 - Ajouter HTML :

Ajouter une bibliothèque d'icônes, par exemple Font Awesome, et attacher les icônes aux boutons HTML :

<!-- Ajouter une bibliothèque d'icônes -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Ajouter des icônes Font Awesome aux boutons -->
<p>Boutons d'icônes :</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>
<p>Boutons d'icônes avec texte :</p>
<button class="btn"><i class="fa fa-home"></i> Accueil</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Corbeille</button>
<button class="btn"><i class="fa fa-close"></i> Fermer</button>
<button class="btn"><i class="fa fa-folder"></i> Dossier</button>

Deuxième étape - Ajouter CSS :

/* Définir le style du bouton */
.btn {
  background-color: DodgerBlue; /* Fond en bleu dodger */
  border: none; /* Supprimer la bordure */
  color: white; /* Texte en blanc */
  padding: 12px 16px; /* Certaines marges internes */
  font-size: 16px; /* Définir la taille de la police */
  cursor: pointer; /* Le curseur de la souris lorsque la souris est au-dessus */
}
/* Le fond de l'élément change de couleur lorsque la souris est au-dessus */
.btn:hover {
  background-color: RoyalBlue;
}

Essayer vous-même

Pages liées

Tutoriel :Tutoriel d'icône

Tutoriel :Bouton CSS