Πώς να δημιουργήσετε: Κουμπιά κοινωνικών μέσων

Πώς να σχεδιάσετε το στυλ των κουμπιών κοινωνικών μέσων

Βήμα 1 - Προσθέστε HTML:

<!-- Προσθέστε βιβλιοθήκη εικονιδίων -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Προσθέστε εικονίδια του Font Awesome -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
...

Βήμα 2 - Προσθέστε CSS:

παράδειγμα ορθογώνιου

/* Ρυθμίστε στυλ για όλους τους εικονίδια του Font Awesome */
.fa {
  παράθεση: 20px;
  μεγεθος γραμματοσειράς: 30px;
  πλάτος: 50px;
  text-align: center;
  text-decoration: none;
}
/* Προσθέστε εφέ αναγνώρισης αν χρειάζεται */
.fa:hover {
  διαφάνεια: 0.7;
}
/* Ρυθμίστε συγκεκριμένα χρώματα για κάθε εταιρεία */
/* Facebook */
.fa-facebook {
  παρασκήνωση: #3B5998;
  χρώμα: λευκό;
}
/* Twitter */
.fa-twitter {
  παρασκήνωση: #55ACEE;
  χρώμα: λευκό;
}

Δοκιμάστε το προσωπικά

γυροφόρο κουμπί

Συμβουλή:προσθέστε border-radius:50% για να δημιουργήσετε γυροφόρο κουμπί και να μειώσετε πλάτος：

παράδειγμα καμπύλου

.fa {
  παράθεση: 20px;
  μεγεθος γραμματοσειράς: 30px;
  πλάτος: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

Δοκιμάστε το προσωπικά

Σχετικά κουμπιά

Εκμάθηση:Εικονίδια

Εκμάθηση:Κουμπιά CSS