CSS Social Buttons — Социальные кнопки

Социальные кнопки — CSS Social Buttons: простейшая реализация социальных кнопок на CSS с кроссбраузерным кодом. Кнопки адаптивны абсолютно под любой дизайн.

Как реализовать:

1. Прежде всего подключаем стили CSS

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

2. Пример использования

CSS Social Buttons - Социальные кнопки
	<a href="#" class="sb min twitter">Twitter</a>
	<a href="#" class="sb min facebook">Facebook</a>
	<a href="#" class="sb min heart">Heart</a>
	<a href="#" class="sb min linkedin">LinkedIn</a>
	<a href="#" class="sb min pinterest">Pinterest</a>
	<a href="#" class="sb min podcast">Podcast</a>
	<a href="#" class="sb min rss">RSS</a>
	<a href="#" class="sb min share_this">Share</a>
	<a href="#" class="sb min star">Star</a>
	<a href="#" class="sb min vimeo">Vimeo</a>

Где ключевую роль играет именно подключенный класс

sb min facebook

3. Пример использования кнопок с текстом

CSS Social Buttons - Социальные кнопки
	<a href="#" class="sb text twitter">Twitter</a>
	<a href="#" class="sb text facebook">Facebook</a>
	<a href="#" class="sb text heart">Heart</a>
	<a href="#" class="sb text linkedin">LinkedIn</a>
	<a href="#" class="sb text pinterest">Pinterest</a>
	<a href="#" class="sb text podcast">Podcast</a>
	<a href="#" class="sb text rss">RSS</a>
	<a href="#" class="sb text share_this">Share</a>
	<a href="#" class="sb text star">Star</a>
	<a href="#" class="sb text vimeo">Vimeo</a>

4. Скриншот всех вариантов оформлений

CSS Social Buttons - Социальные кнопки

delux

Предлагаю делиться опытом в сфере сайтостроения!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.