Коллекция качественных CSS3 кнопок с иконками, которые без преувеличения впишутся в дизайн практически любого сайта. Иконки созданы при помощи иконочного шрифта, сгенерированного в сервисе IcoMoon.io. Подробнее о данном сервисе Вы сможете ознакомиться в данной статье.
Как установить и вывести кнопки у себя на сайте
Скачиваем приложенный архив и распаковываем его содержимое в следующую директорию Вашего сайта:
Скачать архив с иконочными шрифтами и css файлом
В исполняемом файле шаблона, который в большинстве случаев находится по следующему пути:
Если Вы используете шаблон от студии Yootheme, то исполняемый файл шаблона и путь к нему будут следующими: /templates/шаблон/layouts/theme.php
Css файл подключен, осталось вывести нужные кнопки на сайте. Сделать это можно используя нижеприведенный код, размещаемый в контенте статьи или html-модуля. Для удобства кнопки были разделены по тематике.
Социальные сети, видеохостинги и другие сервисы
Google+ Facebook ВКонтакте Twitter Instagram Youtube Одноклассники Mail.ru Яндекс Vimeo Skype Whatsapp Twitch
/*Кнопка 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
/*Кнопка 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 Скачать Скачать
/*Кнопка "Скачать в 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
/*Кнопка 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>
Разное
Домой Комментарии Распечатать Позвонить Местоположение Важная информация Победитель Внимание Задать вопрос Карта сайта Подарок Доставка Купить/в корзину Статистика Рассылка Наверх Читать далее Рассчитать Оставить отзыв
/*Кнопка "Домой"*/ <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>
Комментарии