Hoe te maken: Sociale mediaknoppen
- Vorige pagina Knop op afbeelding
- Volgende pagina Meer lezen/Less lezen
Leer hoe je de stijl van sociale mediaknoppen met CSS instelt.
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; }
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%; }
Gerelateerde knoppen
Handleiding:Icoon
Handleiding:CSS knop
- Vorige pagina Knop op afbeelding
- Volgende pagina Meer lezen/Less lezen