« Адаптивные CSS иконки социальных сетей со светящимся эффектом »

Описание материала:

Качественные иконки социальных сетей со светящимся эффектом, разработанные с использованием HTML, CSS и Font-Awesome. У каждой иконки свой цвет при наведении, подходящий под цвет самой социальной сети.
Подробнее о иконках:
Их размер 75px в ширину и 75px в высоту. Цвет без наведения белый у всех иконок. А при наведении - Вконтакте #4a76a8, Одноклассники #e47d08, Facebook #3b5998, Twitter ]#00aced, Instagram #bc2a8d. Толщина border 5px, а тень box-shadow и text-shadow при наведении 15px.

Если вы захотите добавить или изменить иконки под себя, это легко делается в CSS и HTML кодах.

Так выглядят иконки при просмотре на компьютере:
Адаптивные CSS иконки социальных сетей со светящимся эффектом


А так выглядят иконки при просмотре со смартфона:
Адаптивные CSS иконки социальных сетей со светящимся эффектом


Установка:

Подключаем Font-Awesome:
Код
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">


HTML код:
Код
<div class="ufive_soc">
  <ul>
  <li class="vk"><a href="#"><i class="fa fa-vk fa-2x" aria-hidden="true"></i></a></li>
  <li class="ok"><a href="#"><i class="fa fa-odnoklassniki fa-2x" aria-hidden="true"></i></a></li>
  <li class="fb"><a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a></li>
  <li class="tt"><a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
  <li class="ig"><a href="#"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
  </ul>
</div>


CSS код:
Код
.ufive_soc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 570px;
}
.ufive_soc ul {
  list-style: none;
}
.ufive_soc ul li {
  width: 75px;
  height: 75px;
  line-height: 75px;
  margin: 0 10px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  border: 5px solid #fff;
  float: left;
  transition: all 0.5s ease;
}
.ufive_soc ul li .fa {
  color: #fff;
  margin-top: 20px;
  transition: all 0.5s ease;
}

/* фейсбук */
.ufive_soc ul li:hover.fb {
  border: 5px solid #3b5998;
  box-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}
.ufive_soc ul li:hover .fa-facebook {
  color: #3b5998;
  text-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}

/* твиттер */
.ufive_soc ul li:hover.tt {
  border: 5px solid #00aced;
  box-shadow: 0 0 15px #00aced;
  transition: all 0.5s ease;
}
.ufive_soc ul li:hover .fa-twitter {
  color: #00aced;
  text-shadow: 0 0 15px #00aced;
  transition: all 0.5s ease;
}

/* инстаграм */
.ufive_soc ul li:hover.ig {
  border: 5px solid #bc2a8d;
  box-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}
.ufive_soc ul li:hover .fa-instagram {
  color: #bc2a8d;
  text-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}

/* вконтакте */
.ufive_soc ul li:hover.vk {
  border: 5px solid #4a76a8;
  box-shadow: 0 0 15px #4a76a8;
  transition: all 0.5s ease;
}
.ufive_soc ul li:hover .fa-vk {
  color: #4a76a8;
  text-shadow: 0 0 15px #4a76a8;
  transition: all 0.5s ease;
}

/* одноклассники */
.ufive_soc ul li:hover.ok {
  border: 5px solid #e47d08;
  box-shadow: 0 0 15px #e47d08;
  transition: all 0.5s ease;
}
.ufive_soc ul li:hover .fa-odnoklassniki {
  color: #e47d08;
  text-shadow: 0 0 15px #e47d08;
  transition: all 0.5s ease;
}

@media screen and (max-width: 640px) {
  .ufive_soc {
  width: 350px;
  }
  .ufive_soc ul li {
  margin-top: 10px;
  }
  .ufive_soc ul li.ig {
  margin-left: 60px;
  }
}

@media screen and (max-width: 340px) {
  .ufive_soc {
  width: 150px;
  }
  .ufive_soc ul li {
  margin: 15px;
  }
  .ufive_soc ul li.ig {
  margin-left: 15px;
  }
}


Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 47


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar