Коллекция качественных CSS3 кнопок с иконками, которые без преувеличения впишутся в дизайн практически любого сайта. Иконки созданы при помощи иконочного шрифта, сгенерированного в сервисе IcoMoon.io. Подробнее о данном сервисе Вы сможете ознакомиться в данной статье.
Как установить и вывести кнопки у себя на сайте
Скачиваем приложенный архив и распаковываем его содержимое в следующую директорию Вашего сайта:
Скачать архив с иконочными шрифтами и css файлом
В исполняемом файле шаблона, который в большинстве случаев находится по следующему пути:
1 | <link rel="stylesheet" href="/templates/шаблон/fonts/fontkhasanov.css" type="text/css"> |
Если Вы используете шаблон от студии Yootheme, то исполняемый файл шаблона и путь к нему будут следующими: /templates/шаблон/layouts/theme.php
Css файл подключен, осталось вывести нужные кнопки на сайте. Сделать это можно используя нижеприведенный код, размещаемый в контенте статьи или html-модуля. Для удобства кнопки были разделены по тематике.
Социальные сети, видеохостинги и другие сервисы
Google+ Facebook ВКонтакте Twitter Instagram Youtube Одноклассники Mail.ru Яндекс Vimeo Skype Whatsapp Twitch
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /*Кнопка Google+*/<a class="kh-button google" href="#"><i class="ico-googleplus"></i>Google+</a>/*Кнопка Facebook*/<a class="kh-button facebook" href="#"><i class="ico-facebook"></i>Facebook</a>/*Кнопка ВКонтакте*/<a class="kh-button vk" href="#"><i class="ico-vk-B"></i>ВКонтакте</a>/*Кнопка Twitter*/<a class="kh-button twitter" href="#"><i class="ico-twitter"></i>Twitter</a>/*Кнопка Instagram*/<a class="kh-button instagram" href="#"><i class="ico-instagram"></i>Instagram</a>/*Кнопка Youtube*/<a class="kh-button youtube" href="#"><i class="ico-youtube-3"></i>Youtube</a>/*Кнопка "Одноклассники"*/<a class="kh-button ok" href="#"><i class="ico-ok"></i>Одноклассники</a>/*Кнопка Мейл.ру*/<a class="kh-button mail" href="#"><i class="ico-mail"></i>Мейл.ру</a>/*Кнопка Яндекс*/<a class="kh-button yandex" href="#"><i class="ico-yandex"></i>Яндекс</a>/*Кнопка Vimeo*/<a class="kh-button vimeo" href="#"><i class="ico-vimeo"></i>Vimeo</a>/*Кнопка Skype*/<a class="kh-button skype" href="#"><i class="ico-skype"></i>Skype</a>/*Кнопка Whatsapp*/<a class="kh-button whatsapp" href="#"><i class="ico-whatsapp"></i>Whatsapp</a>/*Кнопка Twitch*/<a class="kh-button twitch" href="#"><i class="ico-twitch"></i>Twitch</a> |
CMS и операционные сисемы
Joomla Wordpress Linux Windows Apple Android
1 2 3 4 5 6 7 8 9 10 11 12 | /*Кнопка Joomla*/<a class="kh-button joomla" href="#"><i class="ico-joomla"></i>Joomla</a>/*Кнопка Wordpress*/<a class="kh-button wordpress" href="#"><i class="ico-wordpress"></i>Wordpress</a>/*Кнопка Linux*/<a class="kh-button linux" href="#"><i class="ico-linux"></i>Linux</a>/*Кнопка Windows*/<a class="kh-button windows8" href="#"><i class="ico-windows8"></i>Windows</a>/*Кнопка Apple*/<a class="kh-button apple" href="#"><i class="ico-appleinc"></i>Apple</a>/*Кнопка Android*/<a class="kh-button android" href="#"><i class="ico-android"></i>Android</a> |
Скачивание файлов
Скачать в PDF Скачать в Word Скачать в Excel Скачать Скачать
1 2 3 4 5 6 7 8 9 10 | /*Кнопка "Скачать в PDF"*/<a class="kh-button pdf" href="#"><i class="ico-file-pdf"></i>Скачать в PDF</a>/*Кнопка "Скачать в Word"*/<a class="kh-button word" href="#"><i class="ico-file-word"></i>Скачать в Word</a>/*Кнопка "Скачать в Excel"*/<a class="kh-button excel" href="#"><i class="ico-file-excel"></i>Скачать в Exce</a>/*Кнопка Скачать №1*/<a class="kh-button def" href="#"><i class="ico-download1"></i>Скачать</a>/*Кнопка Скачать №2*/<a class="kh-button def2" href="#"><i class="ico-download2"></i>Скачать</a> |
Популярные браузеры
Chrome Safari Firefox Internet Explorer Opera
1 2 3 4 5 6 7 8 9 10 | /*Кнопка Chrome*/<a class="kh-button chrome" href="#"><i class="ico-chrome"></i>Chrome</a>/*Кнопка Safari*/<a class="kh-button safari" href="#"><i class="ico-safari"></i>Safari</a>/*Кнопка Firefox*/<a class="kh-button firefox" href="#"><i class="ico-firefox"></i>Firefox</a>/*Кнопка Internet Explorer*/<a class="kh-button IE" href="#"><i class="ico-IE"></i>Internet Explorer</a>/*Кнопка Opera*/<a class="kh-button opera" href="#"><i class="ico-opera"></i>Opera</a> |
Разное
Домой Комментарии Распечатать Позвонить Местоположение Важная информация Победитель Внимание Задать вопрос Карта сайта Подарок Доставка Купить/в корзину Статистика Рассылка Наверх Читать далее Рассчитать Оставить отзыв
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | /*Кнопка "Домой"*/<a class="kh-button def" href="#"><i class="ico-home"></i>Домой</a>/*Кнопка "Комментарии"*/<a class="kh-button def" href="#"><i class="ico-bubbles"></i>Комментарии</a>/*Кнопка "Распечатать"*/<a class="kh-button def2" href="#"><i class="ico-printer"></i>Распечатать</a>/*Кнопка "Позвонить"*/<a class="kh-button def2" href="#"><i class="ico-phone"></i>Позвонить</a>/*Кнопка "Местоположение"*/<a class="kh-button def" href="#"><i class="ico-location"></i>Местоположение</a>/*Кнопка "Важная информация"*/<a class="kh-button question" href="#"><i class="ico-info"></i>Важная информация</a>/*Кнопка "Победитель"*/<a class="kh-button gift" href="#"><i class="ico-trophy"></i>Победитель</a>/*Кнопка "Домой"*/<a class="kh-button warning" href="#"><i class="ico-warning"></i>Внимание</a>/*Кнопка "Внимание"*/<a class="kh-button question" href="#"><i class="ico-question"></i>Задать вопрос</a>/*Кнопка "Карта сайта"*/<a class="kh-button def" href="#"><i class="ico-tree"></i>Карта сайта</a>/*Кнопка "Подарок"*/<a class="kh-button gift" href="#"><i class="ico-gift"></i>Подарок</a>/*Кнопка "Доставка"*/<a class="kh-button def" href="#"><i class="ico-truck"></i>Доставка</a>/*Кнопка "Купить/в корзину"*/<a class="kh-button cart" href="#"><i class="ico-cart"></i>Купить/в корзину</a>/*Кнопка "Статистика"*/<a class="kh-button def" href="#"><i class="ico-stats-bars"></i>Статистика</a>/*Кнопка "Рассылка"*/<a class="kh-button rss" href="#"><i class="ico-rss"></i>Рассылка</a>/*Кнопка "Наверх"*/<a class="kh-button def" href="#"><i class="ico-arrow-up"></i>Наверх</a>/*Кнопка "Читать далее"*/<a class="kh-button def" href="#"><i class="ico-circle-right"></i>Читать далее</a>/*Кнопка "Рассчитать"*/<a class="kh-button def2" href="#"><i class="ico-calculator"></i>Рассчитать</a>/*Кнопка "Оставить отзыв"*/<a class="kh-button def2" href="#"><i class="ico-clipboard"></i>Оставить отзыв</a> |
Комментарии