2 810 Скрипты / Social Media

Круглая кнопка для соц. сетей

Круглая кнопка SHARE при наведении на которую появляются кнопки сервисов популярных социальных сетей, таких как, например, twitter, google +1, vkontakte, facebook и любых других по вашему усмотрению. Кнопки выбранных сервисов будут расположены по кругу.

HTML

Основа представляет собой несколько DIV-ов:


<div id="buttons">
    <div class="holder identity"> </div>
    <div class="holder identity"> </div>
    ....
</div>

Заполнив ДИВы кнопками соц. сетей получим что-то похожее на это:

CSS

В свойствах div:nth-of-type(2), (3), (4), (5), (6), (7)

определяем положение наших соц. кнопок на круге (всего 6 сервисов).
1-ый DIV у нас используется для надписи на самой кнопке +.
<div class="text">+</div>

Остальные 6 DIV-ов - заняты нашими социальными сервисами.

Их может быть и меньше и больше.

JS

Для самой кнопки скрипты не используются, но для соц. сетей не забываем подключать их java-коды:

Скачать 600Загрузок 1,92 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи