CSS Social Buttons — Социальные кнопки
Социальные кнопки — CSS Social Buttons: простейшая реализация социальных кнопок на CSS с кроссбраузерным кодом. Кнопки адаптивны абсолютно под любой дизайн.
Как реализовать:
1. Прежде всего подключаем стили CSS
|
1 |
<link href="social-buttons.css" rel="stylesheet"> |
2. Пример использования
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
Где ключевую роль играет именно подключенный класс
|
1 |
sb min facebook |
3. Пример использования кнопок с текстом
|
1 2 3 4 5 6 7 8 9 10 |
<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. Скриншот всех вариантов оформлений
