« Выезжающие социальные иконки »

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

Слегка спрятанные изначально иконки, выезжают при наведении на них курсора мыши. Какие иконки присутствуют в данном материале: ВКонтакте, Twitter, Google +, Facebook, Одноклассники, Linkedin, Youtube и иконка RSS.

Установка:
1. Скачиваем архив с нашего сайта и загружаем папку soc_icons в корень своего сайта
2. Вставьте в таблицу стилей CSS данный код:

Код


.menu {

  text-align: center;
  height: 60px;
  overflow: hidden;
  cursor: default;
}
   
.menu i {
  position: relative;
  top: 30px;
  transition: .2s ease;
}
   
.menu i:hover {
  top: 9px;
}
.icon {
  border-radius:10px;  
}



3. Разместите этот HTML код в том месте где вы хотите видеть социальные иконки:
Код
<div class="menu">
<i><a href="адрес ссылки" ><img src="/soc_icons/vkontakte.png" alt="Vkontakte"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/twitter.png" alt="Twitter"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/google_plus.png" alt="Google"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/facebook.png" alt="Facebook"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/odnoklassniki.png" alt="Ok"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/linkedin.png" alt="Linkedin"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/youtube.png" alt="Youtube"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/rss.png" alt="Rss"class="icon"></a></i>
</div>


Скачать ( Размер архива 11.8 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

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

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

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

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


Добавил: maksim | Категория: Кнопки и иконки | Просмотров: 647 | Загрузок: 32

Теги к материалу: Выезжающие, иконки, социальные

Поделиться в соц. сетях:
Комментариев к материалу: 2
Александр 20.02.2016 в 23:15Спам
Иконки замечательные
2
Виктор Ягодин 21.02.2016 в 13:10
Рады что вам понравилось)
0
avatar