Красивые социальные кнопочки с использованием CSS
В качестве hover используется opacity (определяет уровень прозрачности элемента), его вы можете редактировать под себя. Так же еще больше красоты придает свойство transition, он делает эффект между двумя псевдоэлементами, таких как: :hover или :active. Для удобства графика иконок прописана в стилях. Код очень прост, ничего сложного нету. [HTML]<a class="zatemno" id="vk" rel="nofollow" target="_blank" onclick="window.open('http://vk.com/share.php?url=http://web-development.my1.ru/', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false"></a> <a class="zatemno" id="fb" rel="nofollow"></a> <a class="zatemno" id="twtr" rel="nofollow"></a> <a class="zatemno" id="gplus" rel="nofollow"></a> <a class="zatemno" id="mail" rel="nofollow"></a> <a class="zatemno" id="odnkls" rel="nofollow"></a> <a class="zatemno" id="yandx" rel="nofollow"></a>[/HTML] [CSS].zatemno{ -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } .zatemno:hover{ -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #vk{ display:inline-block;vertical-align:bottom;background:url(vkontakte.png);width:50px;height:50px; } #fb{ display:inline-block;vertical-align:bottom;background:url(facebook.png);width:50px;height:50px; } #twtr{ display:inline-block;vertical-align:bottom;background:url(twitter.png);width:50px;height:50px; } #mail{ display:inline-block;vertical-align:bottom;background:url(mail.ru.png);width:50px;height:50px; } #odnkls{ display:inline-block;vertical-align:bottom;background:url(odnoklasniki.png);width:50px;height:50px; } #yandx{ display:inline-block;vertical-align:bottom;background:url(xernr.png);width:50px;height:50px; } #gplus{ display:inline-block;vertical-align:bottom;background:url(googleplus.png);width:50px;height:50px; }[/CSS] 
|
Категория: 
Опубликовал: 
Используемый код:
Web-сайт автора: 
Автор: |
СКАЧАТЬ
Размер файла: 515.8 Kb
Посмотреть |
Комменты
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
[ Регистрация ]
