Перейти к публикации
.V.I.P.

Кнопки меню

Рекомендованные сообщения

4.png

CSS:

a.button5 {
  display: inline-block;
  color: #000;
  font-size: 12px;
  text-decoration: none;
  user-select: none;
  padding: 0 5px;
  outline: none;
  border-radius: 2px;
}
a.button5:before {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;  /* для больших картинок 0 */
  padding-right: 5px;
}
a.button5[data-twitter]:before {content: url(http://favicon.yandex.net/favicon/twitter.com);}
a.button5[data-vk]:before {content: url(http://favicon.yandex.net/favicon/vk.com);}
a.button5[data-facebook]:before {content: url(http://favicon.yandex.net/favicon/facebook.com);}
a.button5:hover {
  background: linear-gradient(#ececeb, #eaeaea);
  box-shadow:
   inset rgba(0,0,0,.5) 0 -1px 1px,
   inset rgba(0,0,0,.2) 0 1px,
   inset #fff 0 2px,
   rgba(0,0,0,.2) 0 1px 1px;
}
a.button5:active {
  background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1));
  box-shadow:
   inset rgba(0,0,0,.8) 0 1px 2px,
   inset rgba(0,0,0,.05) 0 -1px 0,
   #fff 0 1px 1px;
}

HTML:

<a href="#" class="button5" data-twitter>twitter</a>

С помощью этого я сделал кнопки связи и информации в темах

  • Повысить 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Guest
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.


  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...