Hur man skapar: Sociala medier-knappar

Hur man designar stilar för sociala medier-knappar

Steg 1 - Lägg till HTML:

<!-- Lägg till ikonbibliotek -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Lägg till Font Awesome-ikoner -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
...

Steg 2 - Lägg till CSS:

Rektangulär exempel

/* Ställ in stilar för alla Font Awesome-ikoner */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}
/* Lägg till en hover-effekt om nödvändigt */
.fa:hover {
  opacity: 0.7;
}
/* Ställ in specifika färger för varje varumärke */
/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}
/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

Prova själv

Kurvformade knappar

Tips:lägg till border-radius:50% för att skapa en cirkulär knapp och minska width:

Kруглий приклад

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

Prova själv

Relaterade knappar

Handlingar:Ikoner

Handlingar:CSS-knapp