Как создать: социальные кнопки

Как спроектировать стиль социальных кнопок

Шаг 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 {
  фondo: #3B5998;
  цвет: белый;
}
/* Twitter */
.fa-twitter {
  фondo: #55ACEE;
  цвет: белый;
}

Попробуйте сами

круглые кнопки

Совет:добавить border-radius:50% для создания круглых кнопок и уменьшения ширина:

пример закругления углов

.fa {
  отступ: 20px;
  размер шрифта: 30px;
  ширина: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

Попробуйте сами

Связанные кнопки

Урок:Иконка

Урок:Кнопки CSS