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

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

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

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

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

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

Цвет кнопок

Форма кнопок

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

Добавить Title

 

Код HTML:

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

 

Код CSS

 

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

 

 

Комментарии 23
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 #

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

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

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

18:46 09.06.2020 #

Во первых, в html вы два раза вставили <div class="social__block">. Один из них уберите и закрывающий див </div> перед </section> тоже уберите.

По стилям уберите то что я дал в предыдущем посте выше. Вместо того вставьте:

.social__section {
    background-color: #555d66;
    margin-bottom: 20px;
    padding: 5px 0;
}

Цвет поменять также для background-color задаёте значение.

Если хотите кнопки выровнять по центру, измените в style.css 482 строка:

.social__block {
    display: block;
    width: max-content;
    margin: auto;
}
14:53 14.06.2020 #

Благодарю! Вроде поправил.

Единственное в мобильной версии полоска с сдвигом влево получается, не сильно критично конечно, но есть такой момент.

15:40 14.06.2020 #

Удалите в файле style.css 494 строку:

.header {
    margin-top: -100px;
}

В строке 488 вместо:

.social__section {
    background-color: #e5e3e4;
    margin-bottom: 100px;
    padding: 0px 0;
}

замените на:

.social__section {
    background-color: #e5e3e4;
    width: 1100px;
}

На мобильном ширина страницы 112 %. При этом нет горизонтального скрола. А вот полоска заняла все 100%. Чтобы полоску сделать одноцветной, указал ей ширину 1100px, как ширина контентной части.

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

16:28 14.06.2020 #

в телефоне теперь нормально, но на компьютере есть смещение. И я так понимаю, чем больше экран, тем больше смещение будет.

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

20:34 14.06.2020 #

Точно, мы же ширину задали 1100px и когда монитор больше 1100px тогда у нас блок с кнопками (эта полоска) остаётся 1100px. Упустил я это, не могу редактировать ваш css поэтому не увидел.

Поправить это просто. Добавьте в css ещё такой стиль:

@media (min-width: 1100px) {
    .social__section {
        width: 100%;
    }
}

Этот css означает что когда ширина экрана 1100px и больше, то ширина блока кнопок будет 100%. Теперь будет нормально отображаться.

15:19 21.06.2020 #

Благодарю! Все получилось!


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