Генератор кнопок соцсетей

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

Кнопки социальных сетей

  Онлайн генератор кнопок социальных сетей для сайта.

  Данный генератор кнопок соцсетей очень прост в использовании. Минимум настроек и вы получаете готовые HTML и CSS.

Установите флажки для соцсетей которые нужно для вас добавить:

Цвет кнопок

Форма кнопок

Вывод SVG-иконок

Добавить Title

 

Внимание! Для кнопок требуется вставлять 2 сгенерированных кода: HTML и CSS. Обязательно!

Код HTML:

  Скопируйте и вставьте данный html-код в нужном месте. Всё что вам остаётся сделать, это заменить значения в атрибуте href="#". Просто замените символ # на ссылку на вашу соцсеть.

 

Код CSS

 

Записи по теме
3D кнопки для сайта
кнопки Анимированные кнопки для сайта с 3D эффектом нажатия, работающие на чистом CSS. Готовое решение: html и css код для добавления на сайт кнопок с 3D эффектом.
Кнопки бутстрап
кнопки Кнопки в css-фреймворке Bootstrap. Цвета и размеры кнопок с примерами и готовыми HTML-кодами.
Кнопки соцсетей для сайта на чистом CSS
youtube Кнопки социальных сетей для сайта сделанные на чистом CSS с применением иконок Font Awesome. Взгляните на моё решение - возможно это именно то что вы ищите.

 

 

Комментарии 90
13:13 04.04.2020 #

А на вимео можо добавить, добрый человек?)

13:17 04.04.2020 #

Да, можно. Сейчас соберу иконку и цвет для кнопки вимео и добавлю новую кнопочку.

13:30 04.04.2020 #

Поклон вам, сделайте ещё кнопочку доната у себя на сайте)

13:31 04.04.2020 #

Готово. Добавил Vimeo.

13:36 04.04.2020 #

А чтобы размер изменить, мне нужно строчку добавить ещё одну?

13:40 04.04.2020 #

Размер, это в css свойства для класса .social a. Вот такие строки:

    width: 48px;
    height: 48px;

width - это ширина, height -высота кнопки. Можно эти значения изменять.

14:32 08.06.2020 #

Добрый день. Получилось установить кнопки. В полной версии сайта все хорошо работает, а когда смотришь с мобильного, то кнопки становятся ЧБ и безразмерные. Подскажите как исправить?

14:42 08.06.2020 #

Не должно быть такого.

У вас или стили переопределяются (тут нужно смотреть на кнопки чтобы точно установить, может у вас на сайте уже прописаны какие то стили для тега svg, может для чего другого),

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

@media (min-width: 768px) {
    /* где то тут вы вставили стили */
}

или может у вас в браузере стили закешировало и берёт стили из кеша где ещё нет стилей для этих кнопок. Тогда нужно просто почистить кеш браузера.

15:28 08.06.2020 #

мобильной версии на сайте вообще нет, в мобильном оно все отображается так же как и в компе.

@media (min-width: 768px) {
    /* где то тут вы вставили стили */
} 

такого запроса у себя тоже не нашел...

Что я могу сделать еще или вам прислать на проверку?

15:33 08.06.2020 #

Оставьте ссылку на сайт, я её потом затру.

Чтобы по быстрому решить и не гадать в чём причина, нужно в живую увидеть что к чему и из за чего.

15:36 08.06.2020 #

-----была_ссылка-----

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

и так и так, все равно через телефон проблема остается

15:51 08.06.2020 #

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

Наверное у вас просто закешировало файл стилей в браузере мобильного. Кеш браузера телефона почистите и всё станет норм. Просто он файл style.css не скачивает с сервера а берёт из кеша, а в кеше у него сохранился файл до того как вы в него внесли изменения, добавив эти стили кнопок. Почистите кеш в браузере смартфона.

18:27 08.06.2020 #

благодарю, да, видимо все таки дело в кеше... просто в браузере инстаграма кеш никак не удалить, если только само приложение...

а можем где-то обсудить мобильную версию сайта? если вы этим занимаетесь конечно. Благодарю!

23:20 08.06.2020 #

Чтобы кнопки встали по аккуратней чем сейчас, оберните кнопки в вот такой див:

<div class="social__block">
    <!-- вместо этой строки html-код ваших кнопок -->
</div>

И добавьте такой css:

.social__block {
    display: block;
    width: max-content;
    margin: 15px auto;
}

Кеши только придётся снова почистить чтобы изменения увидеть. Так кнопки встанут по центру и добавятся отступы. Будет лучше чем сейчас.


А что касается мобильной версии, оно конечно сделать можно и тематика очень интересная. Но есть но. Я сайт немного полистал чтобы ознакомится. Он на вордпрессе сделан, а я с таким даже связываться не хочу. На самих страницах сайта есть битые ссылки ведущие вникуда, отсутствующие изображения и куча других косяков по мелочи. Там если браться делать, то переделывать полностью, то есть делать сайт с нуля, с проверкой, редактированием и переносом всего существующего контента. Итого это по времени выйдет долго (точно больше месяца). Отсюда и цена получится которую даже не прилично озвучивать.

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

09:02 09.06.2020 #

я понял, благодарю!

А подскажите пожалуйста еще такой момент, сейчас соц кнопки перекинул в верхнюю часть сайта, а можно как-то подложку под них сделать определенного цвета? чтобы была просто полоса вверху на всю ширину страницы?

09:36 09.06.2020 #

Да, конечно можно, хоть полоску определённого цвета, хоть изображение.

Давайте обернём наш код ещё одним дивом. Даже по более современному не дивом, а тегом section, так как семантически это у нас отдельный блок:

<section class="social__section">
    <div class="social__block">
        <!-- вместо этой строки html-код ваших кнопок -->
    </div>
</section>

И добавим вот такой css:

.social__section {
    background-color: #ffae4a;
    padding: 20px 0 100px;
}
.header {
    margin-top: -100px;
}

Так же чтобы увидеть изменения чистим кеши.

Если делать просто полоской, то получается не очень. Поэтому я сделал что полоска под шапку сайта опускается. Цвет можно поменять, у свойства background-color поставьте значение нужного вам цвета.

Вот можете цвет выбрать:

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

12:05 09.06.2020 #

о, благодарю!

А как все же сделать, чтобы я мог уменьшить размер полоски, чтобы не так сильно заходила под шапку или вообще не заходила?

и может можно регулировать его прозрачность?

10:48 17.08.2020 #

Добрый день! Не хватает кода для Facebook-messenger Плиз - Вы могли бы добавить код в генератор кнопок, или в ответном комментарии. Спасибо большое!

10:51 17.08.2020 #

Сейчас посмотрю что это такое, если есть - добавлю. Вроде если не ошибаюсь они вацап когда то себе купили, а про Facebook-messenger я даже и не слышал никогда.

11:18 17.08.2020 #

Добавил. Кнопка называется Messenger.

10:14 19.08.2020 #

Отлично! Спасибо Вам!!!

10:31 19.08.2020 #

Было бы великолепно, если в Ваш генератор добавить такую опцию - ВЫБОР : МЕССЕНДЖЕР | СОЦ СЕТЬ. Например я на своём сайте добавил два вида кнопок (два кода): месседжер - кнопки сделал прямоугольные, и все коды исправил .social на .messenger (что бы не конфликтовали коды меж собой, да и вообще работали!). А кнопки соц сетей оставил на Вашем коде, круглые. Тем самым, на сайте: если нужно написать в мессенджер - пользователи используют цветные прямоугольные кнопки удобных для них мессенджеров. А если нужно посмотреть инфо в соц сетях - пользователи используют круглые кнопки соц сетей. Куда и зачем нажимать (действия) - естественно указаны заголовками над кнопками. В итоге = два кода, для двух разных действий. Однако, если соц сети - это все имеющиеся кнопки генератора (кроме мессенджер фейсбук получается), то самих месседжеров 4 шт. в вашем генераторе должно тогда показываться для выбора. Есть ещё один новый к стати мессенджер: Яндекс! Во как! И он интересный, но ещё не раскрученный. А так - было бы классно! Полноценный генератор для: мессенджеров и для соц сетей! Спасибо!

19:18 23.11.2020 #

Привет!

Возможно ли сделать такую кнопку вацап = два в одном?

Например, устанавливается в карточке товара кнопка вацап.

Нажимая на неё - устанавливается не только связь (диалог, переписка) покупателя и продавца по вацап, но одновременно и передаётся ссылка на товар в котором установлена эта кнопка.

На данный момент есть две кнопки вацап:

  1. поделиться товаром - действие передаёт ссылку по вацап на товар, только имеющимся контактам
  2. связь с продавцом - действие открывает связь клиента и продавца по вацап - без добавления в контакты

Как объединить эти два варианта = в один?

Спасибо!

19:56 23.11.2020 #

Как объединить эти два варианта = в один?

При помощи javascript.


Но сама идея не очень. Попробую объяснить почему.

Самое плохое в этом случае - покупатель может запутаться и уйти, что очень вероятно. А раскидываться покупателями в современном интернете - это непозволительная роскошь.

Логика скрипта простая: нажимаем на кнопку - открывается два новых окна браузера. Первое - поделиться, второе - чат. Я в API вацапа давненько заглядывал, но по идеи он на автомате отработает перенаправив в своё приложение. И теперь у покупателя три открытых окна браузера: карточка товара, поделиться и чат. А если ссылка на вацап отработает, то ещё и приложение откроется. Большая вероятность что он может в этом всём запутаться и уйти.

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

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

У меня такое мнение по поводу вашей идеи.

20:15 23.11.2020 #

Любая сложность - это всегда заблуда конечно..... Остаётся стандартный вариант: обращение клиента в чат, и если требуется через кнопку поделиться в уже начатом чате - прилетит и ссылка на товар. Спасибо!!!

20:39 06.12.2020 #

Спасибо воспользовался! А не подскажете, как сделать кнопку с тремя номерами телефона выпадающим списком?

20:53 06.12.2020 #

Типо как кнопка в нижнем правом углу на этом сайте: https://materializecss.com/floating-action-button.html

?


Или типо как у меня здесь кнопка авторизации вверху?

Я не знаю как вы хотите чтобы это в итоге это выглядело. Вариантов то много.

Может вы вообще хотите обычный селект хтмловский использовать, так это вообще проще простого: http://htmlbook.ru/html/select

21:00 06.12.2020 #

О боги.. как быстро Вы отвечаете!!!

На том сайте что Вы указали слева вверху...

21:07 06.12.2020 #

На том сайте что Вы указали слева вверху...

это то что под логотипом (под буквой М)?

21:09 06.12.2020 #

да

21:17 06.12.2020 #

Возможно у вас на сайте уже стоит какой то css-фреймворк (например бутстрап или материалайз). В них уже есть всё готовое для создания подобных штук. Этот элемент называется Dropdown и его можно посмотреть в документациях фреймворков.

А если нужно что то уникальное, то нужно писать код этого элемента. Есть такой сайт кодпен, там много подобных штук пишут и код видно сразу. Можно там посмотреть: https://codepen.io/search/pens?q=Dropdown (это ссылка уже на результаты поиска по Dropdown) там можно очень интересные и крутые штуки найти.

21:19 06.12.2020 #

Спасибо!

12:50 11.12.2020 #

Добрый день, спасибо за разработку, очень удобный сервис! Подскажите почему у меня значки в кнопка не по центру? (в подвале сайта take my time ru) И как сделать ориентацию по левому краю для кнопок? В мобильной версии они по центу становятся.

13:13 11.12.2020 #

У вас конфликт стилей с теми что изначально прописаны для темы. Сейчас посмотрю как исправить.

13:31 11.12.2020 #

Я так понял что вы хотели изменить размер кнопок, но при этом вы сделали ошибку в стилях. И ещё вижу при наведении курсора цвет неправильный.

Удалите css который вы вставили, а вставьте вот так:

.social {display: inline-block}
.social a {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 10px 10px 0;
    text-align: center;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4), inset 1px 1px 0px rgba(255,255,255,0.5);
}
.social a:hover {
    color: #fff;
    border-color: #888;
    opacity: .8;
}
.social svg {
    margin-top: 4px;
    margin-left: 4px;
    width: 25px;
    height: 25px;
}
.facebook a {background: #3b5998}
.instagram a {background: #3f729b}
.linkedin a {background: #0e76a8}
.twitter a {background: #00acee}
.vk a {background: #4a76a8}
.youtube a {background: #c4302b}

Возможно чтобы увидеть изменения вам придётся почистить кэши сайта и браузера.

04:31 22.12.2020 #
<svg role="img" viewBox="0 0 576 512">

скажите в чем здесь ошибка Вордпресс не принимает этот код пишет "The attribute name of (viewBox) must be in lowercase.

09:54 22.12.2020 #

Может вы в код php добавляете делая синтаксическую ошибку?

Атрибут viewBox указан корректно, но для HTML.

13:23 29.12.2020 #

Здравствуйте , можно ли сделать кнопки плавающими и как это сделать, можно ли сделать чтобы при отправке сообщения с сайта в сообщении была ссылка на страницу с которой отправили сообщение. Спасибо, очень у Вас классный интернет ресурс поставьте кнопку ДОНАТ жалко если такой ресурс пропадет .

13:57 29.12.2020 #

Плавающими, это типа фиксированными? - Да, можно. Только это нужно смотреть как реализовывать, многое зависит от сайта и единого рецепта нет.

Что касается отправить ссылку на страницу, понимаете в чёт тут дело. - У этого генератора идея генерировать кнопки "Мы в соцсетях". То есть посетитель нажимает на кнопку и попадает на вашу страницу в соцсети.

А чтобы отправлять ссылку - это вам нужны кнопки Поделиться. К ним ещё дополнительно нужно небольшой javascript написать. Данный генератор таких кнопок не делает, хотя хорошая идея - написать генератор для кнопок поделиться, чтобы можно было кнопки использовать в независимости от платформы. Вполне реально за день написать такой генератор, но я в данный момент другие штуки пишу. Если об этой идее не забуду, возможно в течении пару недель появится и такой генератор для кнопок Поделиться.

18:36 02.03.2021 #

у меня проблемы.на сайте *** нету кружочка и цвета не меняются

18:37 02.03.2021 #

Я не вижу на вашем сайте кнопок.

18:46 02.03.2021 #

на главной.в контактах

18:48 02.03.2021 #

смотреть надо с пк

19:01 02.03.2021 #

Из того что я вижу - нет css. Вы код css точно добавили?

19:06 02.03.2021 #

А вот css /css/default.css в самом низу

19:13 02.03.2021 #

Проверьте сейчас. Теперь должны все увидеть

19:22 02.03.2021 #

Похоже у вас синтаксическая ошибка в файле /css/default.css

Смотрите вот тут не закрыта фигурная скобка (в конце нет символа }):

#toTop:active, #toTop:focus {
    outline:none;

Видите?

19:30 02.03.2021 #

внутринний логотип куда то сместился и меняется только фоновый цвет

19:42 02.03.2021 #

Это стили из иконочного шрифта FontAwesome. Я специально в генераторе заменил FontAwesome на svg-элементы. Так круче по оптимизации. А вы иконки вставили как <i class="fa fa-vk fa-2x"></i> поэтому для них подтягиваются свои стили.

Если хотите исправить, можно в css добавить:

.social .fa {
    padding: 0;
}
.social a:hover {
    color: #fff !important;
}
19:54 02.03.2021 #

все встала на свои места осталась одна проблема при наведение не меняется цвет логотипа внутри

20:00 02.03.2021 #

В файле /css/default.css cтрочка 816 исправьте так:

.social a:hover {
    color: #fff !important;
}
20:05 02.03.2021 #

теперь фоновый цвет пропал

20:06 02.03.2021 #

от вк

20:12 02.03.2021 #

У меня нормально.

Но если что, можно так сделать:

.telegram a:hover {background: #249bd7 !important}
.vk a:hover {background: #4a76a8  !important}
20:13 02.03.2021 #

Сделал. Работает все. Спасибо

20:16 02.03.2021 #

Не забудьте в HTML в атрибуте href="#" заменить # на ссылки ваших соцсетей.

20:29 02.03.2021 #

Заменил.Спасибо

06:19 21.03.2021 #

Спасибо!

18:11 22.03.2021 #

@nter-NetPro Не сочтите за наглость. Но нет подобной кнопки для отправки электронного письма? Чтоб пользователь по нажатию мог отправить НАМ письмо?

18:21 22.03.2021 #

Такое сделать можно. Принцип очень простой. Это ссылка у которой значение атрибута href начинается с mailto:

Пример хтмл:

<a href="mailto:example@gmail.com">Написать письмо</a>

Вместо example@gmail.com указать адрес электронного ящика. При нажатии будет открываться почтовый клиент и адрес получателя будет заполнен из атрибута.

Всё это дело можно стилизовать под кнопку. Часто просто делают ссылкой где текстом ссылки указывают так же адрес почты:

<a href="mailto:example@gmail.com">example@gmail.com</a>
21:57 22.03.2021 #

Да это я понимаю, спасибо! Но я имел в виду именно подобной универсальной как для соц сетей

21:59 22.03.2021 #

Круглую с иконкой? Типо так:

Вот ХТМЛ:

<div class="social email" title="Написать нам письмо">
    <a href="#" target="_blank">
        <svg role="img" viewBox="0 0 512 512">
            <path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/>
        </svg>
    </a>
</div>

Во второй строке замените href="#" на href="mailto:example@gmail.com" только ваш Емаил поставьте

Вот CSS:

.social {display: inline-block;}
.social a {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 10px 10px 0;
    text-align: center;
    color: #000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
}
.social a:hover {color: #fff;}
.social svg {
    margin-top: 7px;
    width: 32px;
    height: 32px;
}
.social.email a:hover {background: #5bc7ff}

Если уже добавлен css для кнопок, то из этих стилей только последнюю строчку добавьте к стилям кнопок.

23:34 22.03.2021 #

Это именно, что нужно! Спасибо, Вам!

17:51 16.04.2021 #

А можно сделать кнопку со своей надписью? Например: "я не использую месенджеры" или что-то вроде этого.

17:54 16.04.2021 #

Можно. А как она должна визуально выглядеть?

18:22 16.04.2021 #

Стиль можно такой же сохранить (у меня ч/б и квадратные), и ширину чтобы можно было менять (чтобы подогнать под мобильную версию). Установлены кнопки: месенджер, телеграм, Вк

17:45 17.04.2021 #

Можно ли сделать в виде конвертика (для email)

18:15 17.04.2021 #
18:51 17.04.2021 #

Благодарю!

14:27 17.04.2021 #

Здравствуйте, а как кнопки в линию сделать, сейчас вот так вот ** , svg-спрайт + HTML код и ещё, можно ли добавить steam?

14:30 17.04.2021 #
  1. Может у вас стили закешированы в браузере и css берётся до того как вы его изменили.
  2. А что такое steam ? Ссылку дайте, я даже логотипа не знаю.
14:38 17.04.2021 #

коды не вставляются, поэтому скриншот ***

14:42 17.04.2021 #

Кнопку Стим добавлю в генератор через десяток минут (нужно иконку подобрать и код генератора поправить).

Я так не вижу. Дайте ссылку на свой сайт. Я потом ссылку удалю.

14:47 17.04.2021 #

О, по второму скриншоту вижу что вы вставили svg второй раз. Удалите тот что перед

<div class="social youtube">
14:49 17.04.2021 #

Или удалите полностью и сгенерируйте код заново. Похоже вы пока вставляли закосячили html.

15:10 17.04.2021 #

Не помогло, ссылка на сайт htt*****.ru , кэш чистил и на сайте, и в браузере, и на cloudflare. Кстати, сайт на dle

15:13 17.04.2021 #

На страницу не подключены CSS стили. Вы их добавляли? Сейчас на странице просто нет CSS-стилей кнопок.

15:26 17.04.2021 #

Стилей действительно нет, но ведь svg показываются без них же, там цвет и форма задана, а так же приписана ширина и высота, или стили тоже надо подключить и в них указывать ширину и высоту?

15:30 17.04.2021 #

Стили нужно подключать. Там выравнивание в ряд, отступы, цвет и всё остальное.

15:04 17.04.2021 #

Добавил Steam :

15:46 17.04.2021 #

Спасибо, подключил стили - помогло, а можно ещё логотип гугла типа такого?

Единственный нормальный генератор, была бы кнопка доната - задонатил бы спокойно пару соток за такое :)

15:50 17.04.2021 #

Мне гугл подключить несложно. Возможно даже раньше и была такая кнопка. Но ведь гугл+ закрыли ещё пару лет назад.

Для чего такая кнопка нужна сейчас?

15:54 17.04.2021 #

Ну, у каждого свои предпочтения. Мне не в соц.сети нужна эта кнопка, и не гугл плюс это будет, это в другой блок

16:07 17.04.2021 #

Добавил Google :

Если цвет неправильный, можно подобрать и мне сообщить (желательно в HEX-формате #e34133) код цвета:

16:22 17.04.2021 #

Огромное спасибо :))))

19:20 17.04.2021 #

Как изменить ширину кнопки отдельно от остальных? У меня кнопки стоят в два ряда в одном месте: три сверху и одна снизу. Ту, которая снизу, нужно сделать шире.

19:39 17.04.2021 #

Вот такой HTML:

<div class="social myNameClass">
    <a href="#" target="_blank" >
        Какой то текст
    </a>
</div>

Замените myNameClass на своё название (английскими). И в css добавьте:

.myNameClass {
    width: 150px;
}

.myNameClass a:hover {
    background: #c4302b;
}

Обратите внимание начинается с точки. width - это будет ширина в пикселях. background - это цвет фона кнопки при наведении.

20:07 17.04.2021 #

Что-то нифига... Ширина такая же ((

20:09 17.04.2021 #

Вот так:

.myNameClass {
    width: 150px !important;
}
20:14 17.04.2021 #

Может я не туда код добавляю? Все равно без изменений... ((


*** чтобы писать комментарии.