« Выезжающие социальные иконки на чистом CSS »
Описание материала:
Слегка спрятанные изначально иконки, выезжают при наведении на них курсора мыши. Какие иконки присутствуют в данном материале: ВКонтакте, Twitter, LiveJournal, Facebook, Одноклассники, Linkedin, Youtube и иконка RSS.
Установка:
HTML код:
Код
<div class="menu">
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/vk.png" alt="Vkontakte" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/t.png" alt="Twitter" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/fb.png" alt="Facebook" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/o.png" alt="Ok" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/in.png" alt="Linkedin" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/yt.png" alt="Youtube" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/lj.png" alt="LiveJournal" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/rss.png" alt="Rss" class="icon"></a></i>
</div>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/vk.png" alt="Vkontakte" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/t.png" alt="Twitter" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/fb.png" alt="Facebook" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/o.png" alt="Ok" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/in.png" alt="Linkedin" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/yt.png" alt="Youtube" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/lj.png" alt="LiveJournal" class="icon"></a></i>
<i><a href="#"><img src="http://ufive.ru/demo_file/soc_icons/img/rss.png" alt="Rss" class="icon"></a></i>
</div>
CSS код:
Код
.menu {
text-align: center;
height: 58px;
overflow: hidden;
cursor: default;
border-bottom: 3px solid #f3be81;
width: 440px;
margin: auto;
margin-top: 20%;
border-radius: 20px;
}
.menu i {
position: relative;
top: 30px;
transition: 0.2s ease;
}
.menu i:hover {
top: 9px;
}
.icon {
border-radius: 10px;
}
text-align: center;
height: 58px;
overflow: hidden;
cursor: default;
border-bottom: 3px solid #f3be81;
width: 440px;
margin: auto;
margin-top: 20%;
border-radius: 20px;
}
.menu i {
position: relative;
top: 30px;
transition: 0.2s ease;
}
.menu i:hover {
top: 9px;
}
.icon {
border-radius: 10px;
}
Демонстрация
Демонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
Добавил: maksim | Категория: Кнопки и иконки | Просмотров: 1108 | Загрузок: 33
Теги к материалу:
Поделиться в соц. сетях:
В 13:10, 21.02.2016 оставил(а) комментарий: