9 настраиваемых кнопок социальных сетей CSS и JavaScript

На каждом сайте должны быть кнопки социальных сетей, чтобы расширить возможности обмена информацией в Интернете. Но кнопки общего доступа по умолчанию не так хороши, и каждая из них оформлена по-разному в зависимости от бренда сетей.

Вот почему мы создали эту небольшую коллекцию настраиваемых кнопок общего доступа, которые вы можете отформатировать и повторно использовать на своем сайте. Если вы ищете красивые кнопки для обмена, эти шаблоны станут отличной отправной точкой.

1. Побочный обмен

First up — одна из моих любимых техник, созданная разработчиком Майклом Шофилдом. Этот фиксированный пользовательский интерфейс для совместного использования социальных значков очень распространен в крупных блогах и журналах.

Эти социальные значки могут либо оставаться в самом верху рядом с заголовком, либо могут прокручиваться вниз вместе с пользователем. Я не нашел каких-либо тематических исследований, сравнивающих различия, но я полагаю, что фиксированные кнопки действительно показывают большее количество репостов. И в любом случае они настолько хорошо спроектированы, что не выглядят спамными или втиснутыми в макет.

Это, вероятно, лучший шаблон для начала, если вы ведете блог и хотите использовать специальные значки для обмена.

2. Кнопки изображения

Еще один популярный стиль обмена — репост изображений, найденных на веб-сайте. Это популярно в Pinterest, но может хорошо работать и в Facebook, и в Twitter, и даже в Google+.

Эти кнопки-изображения представляют собой индивидуальный дизайн с использованием чистого CSS3 и фоновых логотипов для каждой из них. Они еще не подключаются ни к каким социальным сетям, но якорные ссылки можно легко запрограммировать для обмена в социальных сетях.

Я уделяю особое внимание дизайну, потому что они феноменально смотрятся на любом изображении. Кроме того, местоположение действительно выдает идею о том, что вы пытаетесь поощрять публикацию самого изображения, а не только поста.

3. Переключить общие ресурсы

Мы все видели эти виджеты обмена WordPress, использующие небольшой значок общего доступа и всплывающее меню. Через некоторое время они могут стать несвежими, поэтому их можно немного перемешать.

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

Каждая иконка была разработана на чистом CSS, а анимация управляется с помощью jQuery. Вы должны иметь возможность просто скопировать/вставить это в любой макет и заставить его работать. Он хорошо вписался бы рядом с заголовком статьи или даже внизу после того, как люди закончили читать. В любом случае это обязательно увеличит социальные акции по всем направлениям.

4. Круговые анимации

Чтобы немного повеселиться, посмотрите на эти круглые кнопки, созданные Stephane Lyver.

Каждая кнопка имеет свой собственный эффект анимации при наведении, и все они могут идеально вписаться в любой макет. Вы даже можете изменить цвет фона и значков, чтобы они выделялись на простом белом фоне.

Все это работает на чистом CSS, а иконки извлекаются из Font Awesome через Bootstrap.

Обратите внимание, что эти кнопки также не подключаются напрямую к ссылкам для обмена в социальных сетях, но это можно легко исправить с помощью правильного кода.

5. Простые кнопки обмена

Коротко, мило и по делу лучше всего описывает эти кнопки обмена.

Они используют простые иконки SVG из набора иконок Ionicons. Но вам не нужен Ionic или какой-либо JavaScript, чтобы заставить их работать.

Вместо этого они используют значение href вместе с параметрами новой вкладки, чтобы открывать ссылки для обмена прямо в браузере. Не требуется JavaScript, не требуются неуклюжие SVG.

Если вы покопаетесь в наборе иконок Ionic, вы даже сможете найти другие социальные иконки, которые вы, возможно, захотите добавить. Кроме того, у вас есть полный контроль над стилями в CSS, поэтому вы можете изменить размер, отступы, цвет шрифта и многое другое.

6. Скрытые социальные сети

Разработчик Chris Sevilleja создал эти скрытые социальные кнопки с помощью чистого CSS.

Некоторые веб-сайты используют эту технику для встраивания значков общего доступа по умолчанию в значки меньшего размера. Но, по общему признанию, это уникальная анимация, поэтому это не очень распространенная тенденция.

Код действительно прост в настройке, и все выполняется через CSS, поэтому у вас есть полный контроль. Крис даже разработал аналогичную ручку для социальных значков Google+.

Оба фрагмента кода отлично подходят практически для любого веб-сайта, а анимации работают во всех браузерах, совместимых с CSS3.

7. Цвет фона при наведении

Вот действительно уникальная настройка обмена в социальных сетях, где цвет фона меняется в зависимости от того, на какую кнопку вы наводите курсор.

Каждая кнопка имеет свой собственный значок, взятый из Font Awesome, поэтому вы даже можете расширить этот набор, включив в него другие связанные значки. Мне также очень нравится этот подход, потому что у него есть запасной вариант JavaScript для изменений при наведении.

Но веб-разработчик Кристофер Грабински создал чистую альтернативу CSS, которая работает точно так же (в поддерживаемых браузерах).

Я не думаю, что этот метод будет хорошо смотреться в большом блоге, хотя он может работать на небольших сайтах или коротких сообщениях в блогах.

8. Совместное использование всплывающих окон

Разработчик Кайл Лавери (Kyle Lavery) создал потрясающую всплывающую кнопку «Поделиться», которая напоминает подход Google к всплывающим окнам с материалами.

Это использует немного JavaScript, но это всего 5 строк и не очень сложно. Магия анимации заключается в CSS, который вы можете настроить в соответствии со своими потребностями.

Что также интересно, необработанный HTML безумно прост. Он имеет один основной общий контейнер, а затем использует элементы div для кнопок. По сути, 5 строк HTML и 5 строк JavaScript, смешанные с целой кучей CSS, дают вам этот прекрасный эффект.

Абсолютно одна из самых крутых функций обмена в социальных сетях, которые я когда-либо видел, а стиль материального дизайна делает ее еще круче.

9. Кнопки 3D-обмена

Последним в моей коллекции является этот 3D-дизайн с использованием 3D-преобразований CSS вместе с социальными кнопками.

Разработчик Фабрицио Бьянки создал эти кнопки, используя чистый CSS от иконок до анимации преобразования. Основные значки взяты из Font Awesome, а единственный код JS предназначен для встраивания кнопок внутрь.

Но в целом это чисто CSS-решение, которое должно хорошо работать на любом сайте. Не всем нравится 3D-эффект, но если он подходит вашему дизайну, дерзайте.