Социальные иконки на CSS

Социальные иконки использующие 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(dаta: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);
}