Коллекция качественных 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> |
Комментарии