Мой блог

CSS для кнопок социальных сетей

Пишу, что придет в голову))

HTML код

<div class="container text-center"><div class="center-ufive">
  <div id="social-ufive">
  <ul class="social">
  <li><a href="#"><i class="fa fa-vk" aria-hidden="true"></a></i></li>

  <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>

  <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></a></i></li>
      <li><a href="#"><i class="fa fa-telegram" aria-hidden="true"></a></i></li>
  </ul>
  </div>
</div>

</div>

CSS код

.center-ufive {
display: table;
width: 100%;
height: 10vh;
}
#social-ufive {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 30px;
}
#social-ufive .social {
padding-left: 0px;
}
#social-ufive li {
display: inline-block;
}
#social-ufive li a {
color: #aaaebc;
border-radius: 6px;
list-style-type: none;
display: inline-block;
width: 65px;
height: 65px;
line-height: 65px;
padding: 1%;
border: 1px solid #aaaebc;
cursor: pointer;
margin-left: 10px;
margin-bottom: 20px;
transition: ease 0.3s;
}
#social-ufive li a:hover {
color: #ba1616;
border: 1px solid #ba1616;
}
.social:hover > li {
opacity: 0.1;
}
.social:hover > li:hover {
opacity: 1;
}
Поделиться в facebook
Поделиться в google
Поделиться в linkedin
Поделиться в pinterest
Поделиться в email
Поделиться в telegram
Поделиться в whatsapp
Поделиться в facebook

Приступим?

вы можете связаться со мной в любой социальной сети или по e-mail 

я сделаю за вас

то, что я предлагаю

1. Сбор данных
2. Дизайн
3. Кастомизация
4. Наполнение контентом

5. Начальная оптимизация
6. Ребрендинг 
7. Обучение (Видеоурок)
8. Ведение и обновление

Закажите настройку Getсourse (GetFunnels)!

Или уточните любые детали. Я отвечу на все ваши вопросы.