Блог Хасанова Ильи о сайтостроении
  • База знаний
    • Создай свой сайт сам
      • 1 шаг (подготовка)
      • 2 шаг (оформление)
      • 3 шаг (юзабилити)
      • 4 шаг (хостинг/домен)
    • Миграция Joomla
      • C версии 2.5 на 3x
    • Расширения Joomla
      • Компоненты
      • Плагины
      • Модули
    • CSS, HTML, JavaScript
      • Магия CSS стилей
      • Готовые CSS3 кнопки
      • Скрипты
    • Графика и текст
      • Бесшовные фоны
      • Шрифты для сайта
    • Прочее
      • Нужно знать!
      • FAQ Joomla
      • Это интересно!
  • Онлайн-сервисы
    • CSS генераторы
      • Создать градиент
      • Создать кнопку
      • Создать тень у текста
      • Создать тень у блоков
  • Заказать сайт
    • Потенциальному заказчику
      • Вопросы и ответы
      • Заказ-онлайн
  • Отзывы
  • Контакты
Блог Хасанова Ильи о сайтостроении
Партнерская компания AIR для каналов видеохостинга youtube
  • База знаний
  • CSS, HTML, JavaScript
  • Готовые CSS3 кнопки
  • CSS3 кнопки социальных сервисов
01 июня2016

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

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

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;

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

Комментарии

  • Нет комментариев. Ваш будет первым!

Закрепленные

Понравившиеся

Чтобы оставить комментарий, необходимо авторизоваться!
Надежный хостинг, который стоит своих денег!

Авторизация

           

Последние комментарии

Илья Хасанов
Добрый день, на сайте https://yootheme.com/joomla-templates есть бесплатный шаблон https://prnt.sc/vqe77q, https://prnt.sc/vqe7rh
1 шаг к созданию собственного ...
26.11.2020
Дмитрий Филев
Добрый день!! Посоветуйте где взять хороший бесплатный шаблон, для сайта-визитка, блог? В вашем обучении на сайте yootheme.com нет бесплатных шаблонов...
1 шаг к созданию собственного ...
26.11.2020
Хасанов Илья
Здравствуйте, Олег! http://prntscr.com/hbnd1l
2 шаг к созданию собственного ...
17.11.2017
Олег Насиканов
Привет Илья, откуда на 3 минуте из папки дополнительные материалы берётся файл стилей. Где их взять? Заранее благодарен.
С уважением, Олег.
2 шаг к созданию собственного ...
17.11.2017
Роберт Сидоров
Существует ли модуль, отображения новостей как у Вас на сайте реализовано? Нужно, чтобы было разграничение новостей и дата отображалась как у Вас. Воз...
Mj Simple News - модуль вывода...
23.09.2017
Сергей Лаврик
Есть какой видосик по созданию безшовного фона?
Бесшовные фоны для сайта
17.07.2017

Полезные ссылки

  • Скачать
    • Актуальная версия CMS Joomla
    • Актуальная версия Denwer
    • Текстовый редактор Notepad++
    • FTP-менеджер Filezilla
  • Оптимизация кода сайта
    • Анализ сайта PageSpeed Insights
    • Анализ файла robots.txt
    • Проверка скорости загрузки сайта
    • Сжатие JS кода
    • Сжатие CSS кода
  • Ускорение индексации сайта
    • Ускорение индексации в Yandex
    • Ускорение индексации в Google
    • Ускорение индексации в Bing
    • Ускорение индексации в Mail.ru
  • Работа с текстом
    • Подбор ключевых слов Wordstat
    • Проверка текста на уникальность
  • Работа с графикой
    • Сжатие PNG без потерь качества
    • Сжатие JPG без потерь качества
    • Преобразовать PNG в SVG
    • Создать свой бесшовный фон
  • Прочее
    • Онлайн-конструктор карт
    • Генератор надежных паролей
    • Генератор QR-кода

Подписывайся на канал Youtube

Подписывайся на группу в ВК

 

Финансовая поддержка блога

Поддержка блога

Если Вы особо цените труд автора блога и желаете не просто отблагодарить его словестно, но еще и материально - данный раздел сайта создан специально для Вас!

  • Создать сайт на CMS Joomla
  • 1 шаг (подготовка)
  • 2 шаг (оформление)
  • 3 шаг (юзабилити)
  • 4 шаг (хостинг/домен)
  • Миграция сайта на CMS Joomla
  • С версии 2.5 на 3x
  • Расширения CMS Joomla
  • Компоненты
  • Плагины
  • Модули
  • CSS, HTML, JavaScript
  • Магия CSS стилей
  • Готовые CSS3 кнопки
  • Бесшовные фоны на чистом CSS
  • Скрипты
  • Графика и текст
  • Бесшовные фоны/паттерны
  • Шрифты для сайта
  • Прочее
  • Это должен знать каждый сайтостроитель!
  • Вопросы и ответы Joomla
  • Онлайн CSS генераторы
  • Создать CSS градиент
  • Создать CSS кнопку
  • Создать тень у текста
  • Создать тень у блоков
  • Заказать создание сайта
  • Вопросы и ответы
  • Оставить заявку на разработку сайта
  • Об авторе блога
  • Отзывы
  • Контактная информация

При полном или частичном копировании материалов сайта - ссылка на данный ресурс обязательна!
Бесплатные авторские видеоуроки и статьи о CMS Joomla | Ilyakhasanov.ru © 2017

  • База знаний
    • Создай свой сайт сам
      • 1 шаг (подготовка)
      • 2 шаг (оформление)
      • 3 шаг (юзабилити)
      • 4 шаг (хостинг/домен)
    • Миграция Joomla
      • C версии 2.5 на 3x
    • Расширения Joomla
      • Компоненты
      • Плагины
      • Модули
    • CSS, HTML, JavaScript
      • Магия CSS стилей
      • Готовые CSS3 кнопки
      • Скрипты
    • Графика и текст
      • Бесшовные фоны
      • Шрифты для сайта
    • Прочее
      • Нужно знать!
      • FAQ Joomla
      • Это интересно!
  • Онлайн-сервисы
    • CSS генераторы
      • Создать градиент
      • Создать кнопку
      • Создать тень у текста
      • Создать тень у блоков
  • Заказать сайт
    • Потенциальному заказчику
      • Вопросы и ответы
      • Заказ-онлайн
  • Отзывы
  • Контакты