Hoe te maken: Sociale mediaknoppen

Leer hoe je de stijl van sociale mediaknoppen met CSS instelt.

Probeer het zelf

Hoe de stijl van sociale mediaknoppen te ontwerpen

Stap 1 - Voeg HTML toe:

<!-- Voeg de pictogrambibliotheek toe -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Voeg Font Awesome iconen toe -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
...

Stap 2 - Voeg CSS toe:

Rechthoek voorbeeld

/* Stijl voor alle Font Awesome iconen instellen */
.fa {
  padding: 20px;
  font-size: 30px;
  breedte: 50px;
  text-align: center;
  text-decoration: none;
}
/* Indien nodig, voeg een hover-effect toe */
.fa:hover {
  doorzichtigheid: 0.7;
}
/* Voor elke merk een specifieke kleur instellen */
/* Facebook */
.fa-facebook {
  achtergrond: #3B5998;
  color: white;
}
/* Twitter */
.fa-twitter {
  achtergrond: #55ACEE;
  color: white;
}

Probeer het zelf

Hoekafgeronde knoppen

Tip:toevoegen border-radius:50% om ronde knoppen te maken en de breedte:

Hoekafgeronde voorbeeld

.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

Probeer het zelf

Gerelateerde knoppen

Handleiding:Icoon

Handleiding:CSS knop