Inter-Net.PRO

Кнопки для соцсетей  Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.

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

  Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.


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


Набор круглых кнопок

  Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:

 

 

 

 

 

Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.

<div class="social github">
    <a href="#" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</div>
<div class="social youtube">
    <a href="#" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
</div>
<div class="social google-pluse">
    <a href="#" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
<div class="social twitter">
    <a href="#" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</div>
<div class="social instagram">
    <a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
<div class="social facebook">
    <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
</div>
<div class="social skype">
    <a href="#" target="_blank"><i class="fa fa-skype fa-2x"></i></a>
</div>
<div class="social vk">
    <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
</div>
<div class="social odnoklassniki">
    <a href="#" target="_blank"><i class="fa fa-odnoklassniki fa-2x"></i></a>   
</div>
<div class="social pinterest">
    <a href="#" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a>
</div> 
<div class="social linkedin">
    <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
<div class="social telegram">
    <a href="#" target="_blank"><i class="fa fa-paper-plane fa-2x"></i></a>
</div>
<div class="social tumblr">
    <a href="#" target="_blank"><i class="fa fa-tumblr fa-2x"></i></a>
</div>
<div class="social windows">
    <a href="#" target="_blank"><i class="fa fa-windows fa-2x"></i></a>
</div>
<div class="social whatsapp">
    <a href="#" target="_blank"><i class="fa fa-whatsapp fa-2x"></i></a>
</div>
<div class="social weibo">
    <a href="#" target="_blank"><i class="fa fa-weibo fa-2x"></i></a>
</div>
<div class="social dropbox">
    <a href="#" target="_blank"><i class="fa fa-dropbox fa-2x"></i></a>
</div>

 

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

Начинается он с <div и заканчивается /div>

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

Надеюсь с вставкой кнопок разберётесь.

Ссылка на соц сеть

 Теперь чтобы вставить ссылку на ваш профиль, канал или группу - нужно в теге href вместо символа # вставить ссылку на вашу соцсеть. Будьте внимательны чтобы не удалить двойную кавычку, которая должна быть перед и в конце ссылки.


Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.

Код CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.social a{
    text-align:center;
    width:46px;
    height:46px;
    float:left;
    background:#fff;
    border:1px solid #ccc;
    box-shadow:0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius:46px;
    margin:0 10px 10px 0;
    padding:6px;
    color:#000;
}
.github a:hover{background:#191919;color:#fff;}
.youtube a:hover{background:#c4302b;color:#fff;}
.google-pluse a:hover{background:#DD4B39;color:#fff;}
.twitter a:hover{background:#00acee;color:#fff;}
.instagram a:hover{background:#3f729b;color:#fff;}
.facebook a:hover{background:#3b5998;color:#fff;}
.skype a:hover{background:#00aff0;color:#fff;}
.vk a:hover{background:#5d84ae;color:#fff;}
.odnoklassniki a:hover{background:#f93;color:#fff;}
.pinterest a:hover{background:#c8232c;color:#fff;}
.linkedin a:hover{background:#0e76a8;color:#fff;}
.telegram a:hover{background:#249bd7;color:#fff;}
.tumblr a:hover{background:#34526f;color:#fff;}
.windows a:hover{background:#125acd;color:#fff;}
.whatsapp a:hover{background:#50b154;color:#fff;}
.weibo a:hover{background:#d52b2b;color:#fff;}
.dropbox a:hover{background:#1087dd;color:#fff;}

 

CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта.

Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.

 Если у вас к сайту уже подключен иконочный шрифт Font Awesome (по умолчанию подключен в бутстрап 4), то можете удалить из кода первую строчку.

  Так же начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.

Например:

 .github a:hover{background:#191919;color:#fff;}


Набор квадратных кнопок

  Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:

 

 

 

 

 

  Для применения квадратных кнопок нужно всё тоже самое что и для круглых, только в CSS  заменить в 10-строчке значение и вместо:

border-radius: 46px;

изменяем на:

border-radius: 6px;


 

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

 


Сергей Проформа аватар
Сергей Проформа ответил в теме #1 04 авг 2018 10:29
 Мои подчетия.
Inter-Net PRO аватар
Inter-Net PRO ответил в теме #2 03 авг 2018 15:01

Сергей Проформа пишет: в шахматном порядке

Смотрите, у меня два варианта получилось - оба они похожи и отличаются только значением в одном свойстве CSS.
Я по разному пробовал стилями повлиять, но пришёл к такому решению:
я разбил на два блока 2 и 3 кнопки. Обернул их дивами с классом social-block.

Получается вот такой HTML
<h3>Подписывайтесь на наши группы в социальных сетях</h3>
<div class="social-block">
    <div class="social google-pluse">
        <a href="https://plus.google.com/109280914044868576598" target="_blank">
            <i class="fa fa-google-plus fa-2x"></i>
        </a>
    </div>

    <div class="social facebook">
        <a href="https://fb.com/groups/pr0forma/" target="_blank">
            <i class="fa fa-facebook fa-2x"></i>
        </a>
    </div>

    <div class="social youtube">
        <a href="https://youtube.com/channel/UCPn4ClDdkqTtXVp4TeEbtvQ" target="_blank">
            <i class="fa fa-youtube fa-2x"></i>
        </a>
    </div>
</div>

<div class="social-block">
    <div class="social vk">
        <a href="https://vk.com/kharkiv_proforma" target="_blank">
            <i class="fa fa-vk fa-2x"></i>
        </a>
    </div>

    <div class="social odnoklassniki">
        <a href="https://ok.ru/group/59115914133564" target="_blank">
            <i class="fa fa-odnoklassniki fa-2x"></i>
        </a>
    </div>
</div>

И теперь нужно добавить стили CSS для social-block.
Вот такой вариант CSS:
.social-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

И вот такой вариант: CSS:
.social-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

Правда на скринах я добавил font-size: 15px; (то что в предыдущем посте) больше ничего не меняя у того класса.
Inter-Net PRO аватар
Inter-Net PRO ответил в теме #3 03 авг 2018 14:17

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

Посмотрел как у вас получилось с иконками - по моему сама иконка в кнопках ушла вверх по центру - получилось не центровано.
Как вариант можно или кнопки уменьшить, или иконку увеличить.
Мне больше нравиться если иконку увеличить.
В файле css/menu1.css добавьте к классу в 27 строке такое свойство:
font-size: 17px;
Можно после color: #000; по моему так лучше.

или можно высоту и ширину кнопок поставить по 24px (то что выше я написал - не добавлять), а вот эти свойства подправить:
width: 24px;
height: 24px;
Тогда кнопки станут меньше и поместятся в один ряд.


Шахматный порядок - я правильно понял, чтобы сверху 3, а снизу 2 кнопки?
Сейчас напишу.
Сергей Проформа аватар
Сергей Проформа ответил в теме #4 03 авг 2018 12:52
Спасибо помогло, назрел такой вопрос, могу ли я расположить данніе кнопки в шахматном порядке?
Inter-Net PRO аватар
Inter-Net PRO ответил в теме #5 02 авг 2018 21:58

Сергей Проформа пишет: подскажите где ошибся

У вас не подключен иконочный шрифт Font Awesome. Именно в нём находятся сами иконки.
Можно в секции <head></head> где подключаются стили css подключить шрифт из CDN добавив такой код:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Сергей Проформа аватар
Сергей Проформа ответил в теме #6 02 авг 2018 17:48
Всем привет, подскажите где ошибся, мой сайт  . Там слева в меню, под нашими партнёрами, фон повставлялся, по кнопкам переходит, а знаков соц сетей не видно. помогите плз
Inter-Net PRO аватар
Inter-Net PRO ответил в теме #7 13 март 2018 10:31
Я вам написал со своей почты на почту с которой Вы зарегистрировались на этом сайте. Админка это конечно не фтп, но всё равно намного проще и быстрее чем угадывать и давать инструкции куда посмотреть и что сделать.
Кирилл аватар
Кирилл ответил в теме #8 12 март 2018 23:40
"файл" как бы не ссылка, поэтому я не понял какой файл. Я могу Вам написать логин и пароль к админке Joola, только хотелось бы сделать это личным сообщением - сами понимаете - на всякий случай.)
Inter-Net PRO аватар
Inter-Net PRO ответил в теме #9 12 март 2018 22:59
Поставить их туда можно и наверное нужно уменьшить в размере и поменять базовый цвет кнопок, НО...

Тут уже так модулем не вставить. Нужно в шаблон лезть в файл index.php шаблона, чтобы увидеть как вёрстка шапки реализована и куда вставить кнопки. Можно туда позиции для модулей прописать, но лучше прям в вёрстке всё это дело вставить чтобы не было кучи ненужных обвёрток от модулей. К тому же я заметил что в модулях стили с фоновой картинкой для заголовка модуля идут.
В идеале, чтобы реализовать ваше желание, нужен FTP-доступ к сайту.
Если сможете, откройте у себя этот файл и скопируйте из него часть кода начиная с места:
<div id="mainwrap">
до строки:
<div id="wrapper">
Посмотрим, может можно будет подсказать без доступа.

И я не пойму почему у вас кнопки соцсетей вставились обёрнутыми в тег <pre></pre>
Это хтмл-овский тег для вставки неформатированого кода. Его не должно быть.
Кирилл аватар
Кирилл ответил в теме #10 12 март 2018 21:44
Очень круто! Спасибо! Зная html и css можно творить чудеса.:) Можно я тогда Вас ещё побеспокою в последний раз, обещаю.) Хотелось бы поднять их вот сюда (см. картинку) Я понимаю, что для этого надо создать две новые позиции в шаблоне, но не где угодно, а именно на этих местах, а как это сделать я не понимаю (языками не владею), простите пожалуйста.
Спасибо.

Авторизация

Войти через соцсети: