Красивые кнопки социальных сетей для сайта: Кнопки соцсетей для сайта на чистом CSS

Содержание

Социальные кнопки на HTML / CSS3

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

See the Pen EbdgoN by Denis (@Dwstroy) on CodePen.

Разметка социальной панели в HTML

Первым делом создадим каркас социальной панели. Чтобы не писать html разметку с нуля я его скопировал с предыдущего урока «Как создать форму в CSS3», в уроке я показывал, как подключать иконки на страничке и красиво оформить.

Скачайте архив с урока на компьютер и разархивируйте. В папке найдете стили и шрифты иконок, которые подключали в предыдущем видео с данного ресурса fontawesome.

io.

В папке img расположена картинка на задний фон, в css папке файл style.css в которой подключили картинку, font-awesome.css содержит стили иконок, в папке fonts их шрифты, а в index.html это все подключено, остается только описать саму разметку.

Я переносу все файлы в IDE редактор PhpStorm в котором буду описывать код, а вы можете их редактировать прям через блокнот.

Открываем файл index.html, в head описано подключение стилей и иконок, тут я думаю все предельно понятно. Между тегами body открываем <div> с классом социал .social, который будет являться нашей оберткой кнопок.

В нутрии создадим, блок <div> с классом .dws-button, второй класс пропишем начальный суффикс dws-, этот блок продублируем шесть раз, в нем разместим ссылку с атрибутом target=_blank чтобы она открывалась в новой вкладке, затем в ней идет блок div с классом dws-share, в нем делаем список для иконки с классом .fa и приставкой второго класса fa- с атрибутом aria-hidden=true за ним добавляем блок с классом .

div.dws-text

Затем отберем иконки, которые задействуем под социальную панель. Переходим на сайт fontawesome.io/icons и выписываем название иконок, которые будем использовать.

facebook
vk
twitter
youtube
odnoklassniki
envelope-o

Вставляем ссылки и прописываем количество подписчиков.

<div>
   <div><a href="https://www.facebook.com/DWstroy-1415456785391372/" target="_blank">
      <div><i aria-hidden="true"></i></div>
      <div>51</div>
   </a></div>
   <div><a href="https://vk.com/dwstroy" target="_blank">
      <div><i aria-hidden="true"></i></div>
      <div>730</div>
   </a></div>
   <div><a href="#">
      <div><i aria-hidden="true"></i></div>
      <div></div>
   </a></div>
   <div><a href="https://www.  youtube.com/channel/UCTgx8cZRD5Jz2_zGaT27S3w" target="_blank">
      <div><i aria-hidden="true"></i></div>
      <div>1299</div>
   </a></div>
   <div><a href="#">
      <div><i aria-hidden="true"></i></div>
      <div></div>
   </a></div>
   <div><a href="mailto:[email protected]">
      <div><i aria-hidden="true"></i></div>
      <div></div>
   </a></div>
</div>

Затем приступим к оформлению стилей.

Открываем style.css, от позиционируем блок .social.

.social{
 position: fixed;
 top: 200px;
 left: 0;
 z-index: 1000;
}

Затем предадим кнопке внешний вид, указываем высоту и ширину, сделаем небольшие отступы. Зададим уменьшение ширины блока кнопки до 40 пик и скроем все, что вылезает за ее пределы при помощи overflow:hidden;. Придаем кнопке анимацию при помощи transition: all 0.5s; и прижимаем ее к левому краю меняя параметр у класса .social left=0.

.dws-button{
 background-color: #3b5998;
 width: 40px;
 height: 25px;
 padding: 5px;
 overflow:hidden;
 transition: all 0.5s;
}

Пропишем иконкам, и тексту которые обернутые в ссылки белый цвет, убираем подчеркивание.

a{
 color: #fff;
 text-decoration:none;
}

Увеличим иконки на 25 пик. и от центруем их по середине. Чтобы они встали по центру, напишем что это блочный элемент.

a i.fa {
 font-size: 25px;
 text-align: center;
 display: block;
}

Сделаем обтекание у иконок при помощи float:left и укажем ширину в 40 пик.

.dws-share{
 float: left;
 width: 40px;
}

Текст прижмем к правой стороне, увеличим его на 20 пик. и отпозиционируем его по центру строки.

.dws-text{
 float: right;
 font-size: 20px;
 position: relative;
 top: 2px;
 right: 5px;
}

Затем предлагаю каждой кнопки задать соответствующий цвет.

.dws-facebook {background-color: #3b5998;}
.dws-vk {background-color: #507299;}
.dws-twitter {background-color: #33bdf1;}
.dws-youtube {background-color: #e62117;}
.dws-odnoklassniki {background-color: #ee8208;}
.dws-envelope-o {background-color: #656766;}

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

.dws-button:hover{
 background-color: #000;
 width: 50px;
 padding-left: 15px;
}

Получилось следующее. Добавим при наведении для блоков с текстом ширину.

.dws-facebook:hover{width:75px;}
.dws-vk:hover,.dws-youtube:hover{width:95px;}

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

Кому понравилось видео, обязательно поделись им в социальных сетях.

Оставить комментарий:

Кнопки социальных сетей и закладок, плавающая панель для сайта!

Здравствуйте, уважаемые читатели блога uznipc.com. Хочу поделиться с вами тем, как я реализовал кнопки социальных сетей, не пользуясь плагинами.

Блогеры, которые уже не первый год занимаются продвижением сайтов, рекомендуют в первую очередь всячески связывать свой сайт с социальными сетями. Зачем? — зададитесь вы вопросом. В наше цифровое время социальные сети стали неотъемлемой частью в жизни человека и очень стремительно развиваются. Кнопки, установленные на сайте, помогают популяризировать статьи, что влияет на общее продвижение и тем самым привлекает посетителей.

При создании блога я понял, что плагины замедляют его работу, нагружая сервер хостера, тем самым, забирая ценных посетителей, которые не желают ждать, пока загрузится страница. К слову, большинство плагинов выглядят, мягко говоря, не очень (не хотелось ставить что-то подобное):

Во-первых, практически все они англоязычные — придется копаться в коде и добавлять нужные нам сервисы, а во-вторых, заметно снизилась скорость загрузки страницы, что меня не порадовало, в общем, ничего стоящего для себя не нашел. После часа поисков по всемирной паутине, наткнулся на замечательный сервис: Share42, который удовлетворил мои потребности (вертикальная плавающая панель и горизонтальная фиксированная, к тому же возможность использовать кнопку «Наверх», что предотвращает установку дополнительного плагина или скитания по коду).

Достоинства сервиса Share42

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

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

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

4. Простота в установке и настройке (не требуется особых знаний в HTML или CSS)

Настройка панели Share42

Первое, что потребуется сделать — выбрать социальные сервисы, которые вы хотите использовать на сайте. Не забудьте о возможности использования дополнительных кнопок, таких как: «Наверх», «RSS», «Избранное браузера» (кнопки разрешается перетаскивать, тем самым, задавая порядок их отображения в будущей панели; активировать сервис, можно кликнув левой кнопкой мыши по иконке).

Перейдем к настройкам. Для начала выберете предпочтительный для вас вид панели (выбрав вертикальный, появится возможность ограничить количество иконок), укажите кодировку сайта.

Хотите поддержать автора проекта? Оставьте иконку сайта Share42, в противном случае снимите птицу. Добавьте ссылку на RSS ленту (если выбирали).

В поле «К вашему сайту подключен jQuery» я изначально не ставил галочку, панель прекрасно работает. Перед тем как скачивать скрипт посмотрите, как будет выглядеть ваше творение.

Установка скрипта на сайт

Распакуйте скачанный ранее архив и загрузите папку share42 (в ней находятся 2 файла: «share42.js» и «icons.png») на сайт (например, у меня получилось следующее — https://uznipc. com/share42, корневая директория в которой папка со скриптом)

Обязательно проверьте работоспособность скрипта, перейдя по ссылке. Если увидите кучу непонятных для вас символов — все правильно! Также я поставил галочку напротив WordPress, так как мой блог стоит на этом движке. На этом мы заканчиваем с настройками и переходим к установке.

Нам предлагают вставить HTML код в шаблон сайта, что мы и сделаем! Я решил выводить

кнопки социальных сетей только на странице с полной новостью. Файл, отвечающий за эту страницу — single.php (для открытия данного файла рекомендую использовать Html редактор Notepad++)

<div data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>" data-top1="150" data-top2="20" data-margin="0"></div>
<script type="text/javascript" src="https://ВАШ-САЙТ.ру/share42/share42.js"></script>

Рассмотрим расстояния:

top1=»150″ — расстояние от начала страницы до плавающей панели (размер указывается в пикселях «px»)

data-top2=»20″ — расстояние от верха окна браузера до панели (при прокрутке, размер в «px»)

data-margin=»0″ — этот параметр отвечает за горизонтальное перемещение панели ( чтобы сдвинуть влево, указываем значение с минусом, например, data-margin=»-50″, сдвинет панель на 50 пикселей влево, вправо аналогично, только без минуса.

Советую использовать бесплатную, маленькую програмку JRuler, которая помогает измерять расстояние в пикселях.

Осталось придать панели эстетичный вид, дабы она вписывалась в дизайн сайта. Для этого в файл style.css (стили) добавим следующее:

#share42 {padding: 6px 6px 0; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}
#share42:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}
#share42 a {opacity: 0.5}   /* прозрачность (0.1 - прозрачно на 90%, 1 - не прозрачно) */
#share42:hover a {opacity: 0.7}   /* прозрачность при наведении */
#share42 a:hover {opacity: 1}    /* прозрачность при наведении на кнопку */

Прозрачность (opacity) и цвета (background) настройте под себя. Готово! Теперь у вас на сайте или блоге привлекательные

кнопки социальных сетей и закладок без использования плагинов.

Вперед Как сделать скриншот с помощью программ Snagit и HyperSnap

37 бесплатных высококачественных красивых наборов иконок социальных сетей для вашего веб-сайта

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

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

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

37 бесплатных высококачественных иконок социальных сетей для вашего сайта:

1. Набор черно-белых иконок от Iconmonstr
2. Набор векторных иконок Long-Shadow от Vecteezy
3. Набор 3D-плоских иконок от GraphicsFuel
4. Бесплатный набор социальных иконок от Nucleo
5. Плоский набор круглых иконок с поддержкой Retina от Land-of-Web 10. Бесплатно Квартира Набор иконок Аллана МакЭвоя
11. Набор иконок Simple Line от Ahmad Firoz
12. Бесплатный набор круглых иконок от Michal Kulesza
13. Набор анимированных плоских иконок от Dani Perez
14. Flat-Shadow, 3D Icon Set от Uiconstock
15. iOS Набор иконок Style от Roberts Ozolins
16. Набор плоских иконок в пастельных тонах от PrintKEG
17. Набор иконок Ultra-Thin Line от MediaLoot
18. Набор иконок Stamp от FreeVectors
19. Набор иконок Outline Social от Graphics Bay Team
20. Набор плоских иконок в стиле гранж от PrintKEG
21. Flat Circular Icon Set от Publicons
22. Geometric Icon Set от Blogtacular
23. Free Stylized Icon Set от Tonicons
24. Socialico Icon Set от FontFabric
25. 3D Icon Set от Sim Эон Качикву
26. PSD Flat Shadow Icon Set от Pixeden
27. Vector Social Icon Set от Dreamstale
28. Flat Social Icon Set от Designmodo
29. Adobe Muse Icon Set
31. Hand Drawn Icon Set от Freepik
32. Набор иконок Vintage Stamp от John Negoita
33. Набор бесплатных иконок Somicro от Tina Mailhot-Roberge
34. Набор плоских круглых иконок от Dawid Dapszus
35. Набор иконок Ribbon-Style от Zee Que
37. Flat Social Icon Set от Specyboy

лет профессионального опыта . На платформе есть множество значков социальных сетей с открытым исходным кодом, которые вы можете скачать бесплатно.
Генератор значков позволяет создавать значки различных размеров, цветов и форм фона. Сжатые значки доступны в виде однострочных фрагментов, которые вы можете добавить в свой HTML.
Источник: iconmonstr.com
2. Набор векторных значков с длинной тенью от Vecteezy
Набор векторных длинных теней для социальных сетей — один из многих наборов значков, доступных на Vecteezy. Vecteezy — одно из крупнейших графических сообществ в мире, в котором участвуют и сотрудничают миллионы художников и иллюстраторов.
Вы можете загрузить наборы иконок с платформы и свободно использовать их в своих личных или профессиональных проектах. Будучи векторами, вы можете изменять размер всех изображений по мере необходимости.
Источник: vecteezy.com
3. Набор трехмерных плоских иконок от GraphicsFuel
Этот набор из 20 иконок доступен в форматах PSD и PNG и имеет разрешение 114 на 114 пикселей. Несмотря на то, что набор 3D Flat Social Media Icon Set в основном сделан для iPhone5, его можно использовать на других мобильных устройствах или в Интернете. Набор содержит яркую графику высокого разрешения, которая оживит ваш веб-сайт и социальные сети.
Источник: graphicsfuel.com
4. Бесплатный набор социальных иконок от Nucleo
Nucleo имеет богатое хранилище из более чем 28 000 иконок, которые вы можете экспортировать для коммерческого использования. Вы можете получить этот бесплатный набор значков социальных сетей на Dribbble. Чтобы получить дополнительные наборы значков, вам необходимо загрузить приложение Nucleo и подписаться за единовременную плату в размере 99 долларов США за пользователя. Значки имеют тип SVG и могут улучшить ваш веб-сайт своим гладким внешним видом.
Источник: dribbble.com
5. Набор круглых плоских значков для Retina-Ready от Land-of-Web
Этот набор из 24 цветных значков в формате PNG украсит ваши профили в Twitter, Facebook, Pinterest, Google+, Dribbble и Behance. Иконки бывают четырех разных размеров — 256 x 256 пикселей, 128 x 128 пикселей, 64 x 64 пикселей и 32 x 32 пикселей. Вы можете бесплатно загрузить эти профессионально выглядящие значки из раздела Freebie на Land-of-web. com.
Источник: land-of-web.com
6. Набор наклеек с иконками социальных сетей от Vecteezy
Изогнутые и красочные наклейки с иконками социальных сетей действительно сделают ваш сайт популярным. Значки представляют собой векторные изображения, которые можно редактировать и изменять размер по мере необходимости.
Источник: vecteezy.com
7. Набор бесплатных векторных многоугольников от LunarPixel. Набор из 160 наклеек доступен в форматах PSD и PNG и поставляется с тремя пустыми шаблонами.
Источник: deviantart.com
8. Набор иконок с градиентной заливкой от Zee Que
Зи Кью. Вы можете использовать эти 40 веб-сайтов с затененными наклейками с контрастным фоном. Варианты размера включают 48, 56, 72, 96, 128 и 256 пикселей. Обратите внимание, что эти значки бесплатны только для личного использования.
Источник: designbolts. com
9. Набор треугольных векторных иконок от Vector4Free
Вы можете получить 20 отличительных иконок социальных сетей, не заплатив ни копейки. Эти модные значки выглядят оригинально благодаря своей треугольной форме. У них чистый дизайн, а разрешение идеально подходит для использования в социальных сетях.
Источник: vector4free.com
10. Бесплатный набор плоских иконок от Аллана МакЭвоя
Если вы ищете обычные значки социальных сетей в свежем виде, вы можете выбрать плоский набор значков Аллана МакЭвоя. Вы можете скачать их бесплатно по ссылке EPS на Dribbble.
Источник: dribbble.com
11. Набор иконок Simple Line от Ahmad Firoz
Минималистичный дизайн линий никогда не выйдет из моды. Вы можете скачать эти 20 наклеек, разработанных Ахмадом Фирозом, на Dribbble. Вы можете получить расширенный набор простых, но стильных иконок, перейдя по ссылке, предоставленной конструктором.
Источник: dribbble.com
12. Бесплатный набор круглых иконок от Michal Kulesza
Черное и белое — классическое сочетание, которое почти никогда не выходит из строя. Если вы ищете черно-белые значки социальных сетей, вы можете скачать бесплатные круглые значки Михала Кулеши. Набор содержит 65 цветных и черно-белых иконок с круглыми рамками и без них.
Источник: dribbble.com
13. Набор анимированных плоских иконок от Dani Perez
Вы можете бесплатно добавлять анимированные плоские значки на свой веб-сайт или в электронные письма. 16 значков доступны в форматах GIF и различных размерах, таких как 64, 128 и 256 пикселей. Вы можете загрузить и сохранить их для последующего использования или сделать их готовыми к публикации, используя их векторные формы.
Источник: behance.net
14. Набор трехмерных иконок Flat-Shadow от Uiconstock
Эти 40 профессионально выглядящих иконок социальных сетей повысят уровень стиля вашего сайта. Их трехмерный вид является отличительным. Вы можете скачать иконки в виде векторов Ai или файлов PNG с веб-сайта uiconstock.
Источник: uiconstock.com
15. Набор иконок iOS Style от Roberts Ozolins
Монохроматические иконки вне времени и стильны. Вы можете загрузить 24 значка социальных сетей iOS через Dribbble. Вы получите файлы EPS или Vector AI, которые можно легко встроить в ваш HTML-код.
Источник: dribbble.com
16. Набор плоских иконок в пастельных тонах от PrintKEG
Яркие значки на фоне в пастельных тонах могут добавить нотку классности вашим веб-сайтам и блогам. Вы можете изменить цвет фона и форму, как вы хотите. Галерея включает в себя иконки большинства популярных социальных сетей.
Источник: blog.printkeg.com
17. Набор значков Ultra-Thin Line от MediaLoot
Будьте стройными с ультратонкими значками социальных сетей, вдохновленными iOS 7. Этот набор из 24 значков доступны в форматах Ai, EPS и SVG. Вы можете свободно использовать их в своих личных и коммерческих проектах с указанием авторства.
Источник: medialoot.com
18. Набор иконок для штампов от FreeVectors
Этот набор иконок содержит 20 оригинальных стикеров, нарисованных вручную. Значки социальных сетей можно использовать в соответствии с условиями бесплатной лицензии FreeVectors.
Источник: freevectors.net
19. Набор иконок Outline Social Icon Set от Graphics Bay Team
Иконки Outline Social Icons — это набор из 27 иконок на ярком синем фоне. Вы можете загрузить значки в виде файлов PDF и Adobe Illustrator.
Источник: dribbble.com
20. Набор плоских иконок в стиле гранж от PrintKEG
Иконки в стиле гранж могут выглядеть круто и по-разному. Вы можете скачать полный набор гранжевых плоских иконок социальных сетей в формате PSD с сайта PrintKEG. Вы можете настроить цвета и прозрачность значка по мере необходимости.
Источник: blog.printkeg.com
21. Набор плоских круглых иконок от Publicons
Если вы предпочитаете аккуратный внешний вид, мы рекомендуем иконки социальных сетей от Publicons. Эта графика с открытым исходным кодом и многократного использования. Все иконки можно скачать в форматах SVG или PNG.
Источник: joshuasortino.com
22. Набор геометрических иконок от Blogtacular
Геометрические иконки социальных сетей предлагают социальные кнопки в ярких, неоновых и пастельных тонах. Выберите цвет, который соответствует теме вашего веб-сайта или контактной карточки. Вы можете смешивать разные оттенки и создавать собственный цвет. Иконки доступны в разных размерах: 32, 64 и 128 пикселей.
Источник: blogtacular.com
23. Бесплатный набор стилизованных иконок от Tonicons
Вы получите семь стилизованных наборов иконок для всех основных социальных сетей. Все изображения являются векторными и многоуровневыми, поэтому вы можете изменять их размер и редактировать их несколькими щелчками мыши.
Источник: tonicons.com
24. Набор иконок Socialico от FontFabric
Подписавшись на Socialico, вы можете получить 74 бесплатных кнопки социальных сетей для своего веб-сайта и социальных аккаунтов. Вы можете назначить сочетания клавиш одним щелчком мыши для ваших любимых значков.
Источник: fontfabric.com
25. Набор 3D-иконок от Симеона Качикву
Этот набор иконок охватывает социальные направления, такие как Medium и Vine, которые трудно найти в других наборах иконок. 12 значков доступны в виде PSD-файлов, которые вы можете легко встроить в код своего веб-сайта.
Источник: dribbble.com
26. PSD Flat Shadow Icon Set от Pixeden
PSD Flat Shadow Icon Set содержит 16 распространенных социальных иконок, которые вы можете загрузить и использовать бесплатно. Создатель использовал эффект длинной тени, чтобы придать значкам приподнятый вид.
Источник: pixeden.com
27. Набор векторных социальных иконок от Dreamstale
90 социальных иконок в девяти стилях делают иконки Dreamstale одними из лучших на рынке. В набор иконок входят и иконки менее известных социальных сетей.
Вы можете выбрать набор из закругленных, водяных, листовых, прямоугольных или цветочных наборов. 810 значков разработаны в Adobe Illustrator и доступны в различных форматах файлов.
Источник: dreamtale.com
28. Набор плоских социальных иконок от Designmodo
Плоские значки соответствуют всем макетам. Если вам нужна надежная ставка для вашего веб-сайта, вы можете использовать 35 плоских значков социальных сетей от Designmodo. Иконки доступны в форматах PSD и PNG.
Источник: designmodo.com
29. Набор значков Adobe Muse
Значки Adobe Muse представляют собой набор из 60 кнопок социальных сетей в черно-белой цветовой гамме. Вы можете бесплатно скачать их, зарегистрировавшись на Behance.
Источник: behance.net
30. Набор плоских иконок от Кристофа Керебеля
Этот изящный набор иконок разработан Кристофом Керебелем и доступен на Dribbble. Вы можете скачать значки и использовать их для украшения своего веб-сайта или печатных материалов.
Источник: dribbble.com
31. Набор рисованных иконок от Freepik
Если вы осмелитесь выделиться, эти нарисованные от руки иконки социальных сетей вам понравятся. Набор иконок содержит 120 социальных кнопок, нарисованных карандашом.
Источник: fribli.com
32. Набор иконок Vintage Stamp от John Negoita
Если вы приверженец старой школы, вы оцените винтажную атмосферу этого набора иконок, созданного John Negoita. 15 иконок доступны в форматах PSD и PNG и имеют размер 256 X 256 пикселей. Лицензия бесплатна в соответствии с Условиями использования Freebie Files.
Источник: webfx.com
33. Набор бесплатных иконок Somicro от Tina Mailhot-Roberge
Небольшой, но мощный набор бесплатных иконок Somicro имеет размер 32 X 32 пикселей. 45 компактных значков могут аккуратно вписаться в ограниченное пространство на ваших веб-страницах и визитных карточках.
Источник: deviantart.com
34. Набор плоских круглых иконок от Давида Дапсзуса
Эти 20 иконок для социальных сетей разработаны Давидом Дапсзусом и доступны на Dribbble. Иконки имеют чистый вид, основанный на минимальном дизайне. Вы можете бесплатно загрузить набор значков в виде ZIP-файла и использовать его для улучшения своего веб-сайта и электронных писем.
Источник: dribbble.com
35. Набор иконок в виде ленты от Zee Que
Эти 18 значков социальных сетей привлекут внимание и заставят зрителей нажать на них. Вы можете получить их в диапазоне размеров от 48 до 256 пикселей.
Источник: designbolts.com
36. Geekly Flat Icon Set от Abdulrahim Bajaber
Этот набор состоит из 40 полностью настраиваемых плоских иконок социальных сетей. Современный дизайн хорошо сочетается с современными минималистичными веб-сайтами.
Источник: behance.net
37. Набор плоских социальных иконок от Specyboy
24 значка в этом наборе имеют плоский дизайн и бывают четырех форм (квадратные, круглые, а также темные и светлые углы со скругленными углами). Они доступны в пяти размерах и различных форматах файлов (PNG и EPS).
Источник: speckyboy.com
Подведение итогов
Как и было обещано, все рассмотренные нами наборы значков доступны бесплатно. Вы можете загрузить эти значки несколькими щелчками мыши и легко использовать их для улучшения своего веб-сайта и печатных изданий. Выберите тот, который соответствует уникальному стилю и индивидуальности вашего бренда. Правильные наборы иконок могут украсить ваш сайт и визитные карточки.
11 социальных кнопок для дизайна сайта | от Niemvuilaptrinh
5 минут чтения
·
27 октября 2021 г.
Добро пожаловать в мой блог. Сегодня мы узнаем о кнопочных компонентах в сочетании с красивыми социальными иконками в веб-разработке.
Сегодня большинство людей используют сайты социальных сетей, чтобы заводить друзей, продвигать бизнес-изображения, свободно делиться тем, что им нравится… Поэтому тот факт, что вы связываете сайты социальных сетей, страницу вашей компании в Facebook. на вашем веб-сайте важно, чтобы люди знали вас, а также чтобы было легче связаться. Если цель вашего веб-сайта — делиться ежедневными историями, продавать, делиться бесплатными вещами… вы хотите, чтобы таких веб-сайтов было больше, недостаточно разработать SEO в Google, вы должны разместить на веб-сайте кнопки обмена статьями, чтобы пользователи могли легко делиться с ними. другие, если они сочтут содержание вашей статьи интересным и впечатляющим.
Здесь я представлю некоторые предварительно разработанные кнопки с HTML, CSS, Javascript, чтобы помочь вам иметь множество вариантов, соответствующих макету и дизайну веб-сайта.
Автор использует белый цвет фона, чтобы соответствовать большинству значков социальных сетей, и использует закругленные углы, чтобы создать мягкий, а не жесткий вид кнопок. Это также обеспечивает отличный эффект, который меняет белый цвет фона на доминирующий цвет этой социальной сети, когда пользователь наводит на нее курсор. Чтобы лучше понять, посмотрите на следующее изображение:
Hover Social Button HTML CSS
Смотрите результаты ниже!
Ссылка
Эта кнопка представляет собой движущуюся комбинацию значка социальной сети с фоновым цветом кнопки. Это поможет вам применить ко многим различным типам значков, а также поможет создать больше удовольствия и удовольствия для пользователей. Чтобы лучше понять, см. следующий код:
Анимированная социальная иконка CSS
Посмотрите результаты ниже!
Ссылка
Если вам нравится простота, то вы должны использовать эту кнопку с дизайном, разделенным на две части, значок и название социальной сети, чтобы помочь предоставить больше информации пользователю. Эффект максимально упрощен за счет изменения цвета значка в соответствии с цветом фона кнопки.
Создать социальную кнопку со значком
Посмотрите результаты ниже!
Ссылка
Если вам не нравятся обычные квадратные кнопки, ниже я предлагаю круглые кнопки, которые помогут создать другое и более мягкое ощущение. Интересным моментом здесь является использование соответствующих цветов для каждой отдельной иконки и разнообразие иконок. Для лучшего понимания см. следующий фрагмент кода:
Социальная кнопка CSS
Посмотрите результаты ниже!
Ссылка
Если вам кажется, что круглая иконка выше выглядит слишком просто, вы можете использовать эту кнопку, чтобы создать движущийся эффект и изменить цвет фона в зависимости от темы вашего веб-сайта. Для лучшего понимания см. код ниже
Анимированная кнопка социальных сетей при наведении курсора
Смотрите результаты ниже!
Ссылка
Эта кнопка имеет довольно простой дизайн, но особенность в том, что эффект наведения на кнопку будет стимулировать любопытство пользователя к каждой отдельной иконке социальной сети, используемой на сайте. Чтобы лучше понять, см. следующий код:
Hover Social Button HTML5 CSS3
Посмотрите результаты ниже!
Ссылка
Если вам нравятся как квадратные, так и круглые кнопки со значками социальных сетей, то эта действительно удовлетворит ваши потребности, изменяя форму, когда пользователь наводит курсор на кнопку. Мы также можем гибко применять его ко многим другим значкам в зависимости от нашего предполагаемого использования. Для лучшего понимания см. следующий фрагмент кода:
Круглая кнопка Социальная иконка CSS
Посмотрите результаты ниже!
Ссылка
Если вам нравится что-то творческое, вы можете использовать эту кнопку, потому что она дает эффект, перемещая 3D, это кажется совершенно новым и креативным, и мы можем добавить информацию о веб-сайте, например, сколько лайков, просмотреть страницу… Чтобы лучше понять, см. следующий код:
3D CSS Кнопка социальных сетей
Посмотрите результаты ниже!
Ссылка
Эта кнопка отвечает вашим потребностям в простом дизайне, который можно применить ко многим макетам страниц и темам, изменив цвет значка и границы в соответствии с вашим назначением.