Социальные иконки использующие CSS3, и являющиеся кроссбраузерными с возможностью редактирования и создания своих собственных иконок.

Разметка HTML

Все иконки представляют из себя ссылку с различным сочетанием названий классов, например:

<a href="#" class="sb twitter">Twitter</a>

Варианты использования

Первый

Нужно добавить класс .sb (.sb - класс для социальной кнопки) и класс иконки (например, Twitter, Facebook, RSS и др.) к тегу <a>.

Используйте этот вариант, если хотите, чтобы каждая кнопка имела свой стиль.

<a href="#" class="sb orange twitter">Twitter</a>
<a href="#" class="sb blue facebook">Facebook</a>

Второй

Класс .sb также используется, но только для тега-оболочки (wrap), таких как <p>, <div> или <ul>.

Класс иконки (Twitter, Facebook, RSS) необходимо добавить к тегу <a>. Используйте этот вариант, если хотите, чтобы кнопки имели один и тот же стиль оформления.

<p class="sb gradient blue">
    <a href="#" class="twitter">Twitter</a>
    <a href="#" class="facebook">Facebook</a>
</p>

<ul class="sb circle gray text">
    <li><a href="#" class="twitter">Twitter</a></li>
    <li><a href="#" class="facebook">Facebook</a></li>
</ul>

CSS

Для использования на своем сайте, достаточно подключить css файл со стилями к себе:

<link href="social-buttons.css" rel="stylesheet" />

Имеющиеся классы

Размеры

  • default = 34px
  • small = 28px
  • large = 42px

Цвета

  • blue
  • purple
  • red
  • green
  • orange
  • brown
  • black
  • gray
  • light-gray
  • light-blue
  • light-purple
  • pink
  • light-green
  • yellow

Стили

  • min = минимальный стиль, нет фона и границ (border)
  • flat = без закругленных уголков и теней
  • circle = круглый стиль
  • embossed = тиснение
  • pressed = стиль нажатия
  • thick-border = толстые границы
  • no-border = без рамки
  • no-shadow = без тени
  • gradient = градиент, применяется при помощи псевдо-класса :after
  • glossy = глянцевый градиент, применяется при помощи псевдо-класса :before
  • text = показывать иконку с текстом

Типы иконок

  • twitter
  • facebook
  • heart
  • linkedin
  • pinterest
  • podcast
  • rss
  • share_this
  • star
  • vimeo

Как добавить свои собственные иконки

Социальных сетей довольно много, поэтому в демо используются только самые популярные, чтобы файл со стилями не был слишком большим. Но можно добавить больше классов иконок с помощью несложного CSS кода (не забудьте добавить класс .sb для анкора <a href="#" class="sb youtube">) :

a.sb.youtube {
    background-image: url('images/youtube.png');
}
a.sb.email {
    background-image: url('images/email.png');
}

Как переопределить размер кнопки и цвет фона

Вы можете изменить размер кнопки и фон, используя следующий код CSS:

a.sb {
    width: 36px;
    height: 36px;

    background-color: #666;
}

Как добавить свой градиент

Градиентный фон применяется при помощи псевдо-элемента :before. Для создания собственных градиентов вы можете воспользоваться сервисом, который мы уже освещали в одной из статей.
Обратите внимание, что SVG-градиент необходим для Internet Explorer 9, так как он не поддерживает градиенты CSS3.

a.sb.gradient.custom:after {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I4YzZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDg4YjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background-image: -moz-linear-gradient(top,  #b8c6df 0%, #6d88b7 100%);
    background-image: -webkit-linear-gradient(top,  #b8c6df 0%,#6d88b7 100%);
    background-image: linear-gradient(top,  #b8c6df 0%,#6d88b7 100%);
}

Как создать собственные стили

Можете просто подправить дефолтные стили в файле css. Класс custom иконки используест стили из класса .gradient, но отменяет изображение в псевдо-элементе :after и использует пользовательское.

/* custom icon */
a.sb.custom {
    width: 80px;
    height: 80px;
   
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
a.sb.custom:after {
    background-image: url(images/custom-bg.png);

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

/* custom icon blue */
a.sb.custom.blue {
    border-color: #96a8af;
}
a.sb.custom.blue:after {
    background-image: url(images/custom-bg-blue.png);
}
/* custom icon pink */
a.sb.custom.pink {
    border-color: #b0a1aa;
}
a.sb.custom.pink:after {
    background-image: url(images/custom-bg-pink.png);
}

/* custom icon background images */
a.sb.custom.retweet {
    background-image: url(images/custom-icon-retweet.png);
}
a.sb.custom.photo {
    background-image: url(images/custom-icon-photo.png);
}
a.sb.custom.comment {
    background-image: url(images/custom-icon-comment.png);
}
СКАЧАТЬСкачек: 898
54,23 Kb
Кто скачал?

ДЕМОПосмотреть
пример