01 июня2016

CSS3 кнопки социальных сервисов

01 июня 2016. Категория: Готовые CSS3 кнопки

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

Иконки созданы при помощи иконочного шрифта, сгенерированного в сервисе IcoMoon.io, подробнее об этом Вы можете ознакомиться в данной статье.

Пример CSS3 кнопок различных социальных сервисов

Иконки социальных сервисов

Для того, чтобы подключить к сайту иконки социальных сервисов, необходимо скачать приложенный архив и распаковать его содержимое в следующую директорию Вашего сайта: /templates/шаблон/fonts. В итоге получается 4 файла иконочного шрифта и 1 css файл, размещающий в себе код вывода иконок.

Скачать архив с иконочными шрифтами и css файлом

В исполняемом файле шаблона, который в большинстве случаев находится по следующему пути: /templates/шаблон/index.php, прописываем между тегами <head>...</head> код подключения css файла:

Если Вы используете шаблон от студии Yootheme, то исполняемый файл шаблона и путь к нему будут следующими: /templates/шаблон/layouts/theme.php

Кнопки социальных сервисов

Половина дела сделана - иконочный шрифт подключен к сайту, осталось создать кнопки и вывести через них иконки социальных сервисов.

HTML разметка кнопок социальных сервисов

/*Кнопка Яндекс*/
<a href="#" class="social-button ico-yandex"></a>
/*Кнопка Google+*/
<a href="#" class="social-button ico-googleplus"></a>
/*Кнопка "Одноклассники"*/
<a href="#" class="social-button ico-ok"></a>
/*Кнопка Мейл.ру*/
<a href="#" class="social-button ico-mail"></a>
/*Кнопка Вконтакте (малый логотип)*/
<a href="#" class="social-button ico-vk-B"></a>
/*Кнопка Вконтакте (международный логотип)*/
<a href="#" class="social-button ico-vk-vk"></a>
/*Кнопка Facebook*/
<a href="#" class="social-button ico-facebook"></a>
/*Кнопка Twitter*/
<a href="#" class="social-button ico-twitter"></a>
/*Кнопка Instagram*/
<a href="#" class="social-button ico-instagram"></a>
/*Кнопка Youtube*/
<a href="#" class="social-button ico-youtube-3"></a>
/*Кнопка Youtube (значок)*/
<a href="#" class="social-button ico-youtube"></a>
/*Кнопка Vimeo*/
<a href="#" class="social-button ico-vimeo"></a>
/*Кнопка Twich*/
<a href="#" class="social-button ico-twitch"></a>
/*Кнопка Whatsapp*/
<a href="#" class="social-button ico-whatsapp"></a>
/*Кнопка Skype*/
<a href="#" class="social-button ico-skype"></a>

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

.social-button {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        border-radius: 50%; //скругление углов кнопки
        width: 54px; //размер кнопки по ширине
        height: 54px; //размер кнопки по высоте
        background: #118EC7; //цвет кнопки в статичном виде
        border: none;
        line-height: 54px;
        color: #fff; //цвет иконки в статичном виде
        font-size: 27px; //размер иконки
        text-align: center;
        /* Скорость анимации */
        -webkit-transition: box-shadow .2s ease-out, background-color .2s ease-out;
        -moz-transition: box-shadow .2s ease-out, background-color .2s ease-out;
        transition: box-shadow .2s ease-out, background-color .2s ease-out;
        margin-bottom: 10px;
        -webkit-user-select: none;
        }
        
.social-button:hover,
.social-button:focus {
        text-decoration: none!important;
        background-color: rgba(255, 255, 255, 0); //фон кнопки при наведении курсора
        color: #118EC7; //цвет иконки при наведении курсора
        text-decoration: none;
        outline: none;
        box-shadow: 0 0 0 3px #118EC7; //цвет рамки при наведении курсора
        border: none
        }

Изменение внешнего вида кнопок

За счет CSS свойств border-radius (скругление углов), background (цвет фона), color (цвет текста), box-shadow (тень, в данном случае рамка при наведении) и width/height (ширина/высота кнопки) можно визуально преобразить внешний вид кнопки. Рассмотрим пару наглядных примеров.

Пример №1

Цвет фона оранжевый background: #F2720C;, иконка белого цвета в статике color: #fff;, квадратный вид кнопки border-radius: 0%;, иконка черного цвета при наведении color: #000;, рамка черного цвета при наведении box-shadow: 0 0 0 3px #000;

Пример №2

Цвет фона зеленый background: #34AF23;, иконка белого цвета в статике color: #fff;, кнопка в виде листочка border-radius: 50% 0%;, ширина по горизонтали 64 пикселя width: 64px;, иконка желтоватого цвета при наведении color: #EFE86A;, фон кнопки при наведении, как и рамка, красноватого оттенка background-color: #D84A2E; и box-shadow: 0 0 0 3px #EA5234;