Как видите, любую кнопку можно сделать динамичной, добавив к ней hover-эффект. Я привела лишь несколько часто используемых вебмастерами ховеров, в Интернете вы можете найти их намного больше.
Теперь давайте разберем, как прикрутить к кнопке любой из вышеприведенных ховер-эффектов. В конце статьи вы можете скачать исходники с используемыми стилями и иконками, отредактировать (изменить размеры, цвета и иконки) и использовать на своем сайте.
В архиве найдете папку Fonts с иконочным шрифтом и файл со стилями. Все правки производятся в файле со стилями. Для этого нужно открыть его любым более-менее продвинутым блокнотом (WordPad или NotePad++), найти блок с нужной кнопкой, они все пронумерованы и внести нужные правки, например, заменить исходный цвет своим.
После редактирования папку с иконочным шрифтом и файл стилей нужно загрузить на хостинг в корневую папку. Удобнее будет в корневой директории создать новую папку, например, buttons и туда положить файлы из архива.
Файл css содержит стилевое оформление всех вышеприведенных кнопок. К каждому блоку кнопок идут сначала общие стили, затем дополнительные - для каждой кнопки. Все хорошо структурировано, поэтому запутаться невозможно. Это в том случае, если вы захотите извлечь стили для какой-то одной кнопки.
Если вы загрузите файл стилей целиком, что очень удобно для новичков (помогает избежать путаницы при тестировании ховер-эффектов), то вам вообще не о чем париться:)) Вы можете установить любый ховер в любое время. Тем более, что файл css весит всего 30 КБ, ровно как и папка с иконочным шрифтом.
Идем дальше, после загрузки файлов на сервер, нужно на сайте там, где должна быть кнопка, разместить буквально одну строку html-кода, отвечающего за ее отображение на странице и подключить стили.
Файл стилей подключается между тегами <head> и </head> следующей строкой:
<link rel="stylesheet" href="buttons/component.css">, где синим цветом выделен путь к вашей папке с файлами ховеров. У меня папка называется buttons, вы вписываете свое название.
Html-код прописывается между тегами <body> и </body> и состоит тоже из одной строки:
<button class="btn btn-1 btn-1a">Кнопка a</button>,
где btn-1 - номер блока ховера, а btn-1a - номер конкретного ховер-эффекта в этом блоке. Вместо "Кнопка а" пишите свой текст для кнопки. Например, для остальных пяти кнопок из первого блока код выглядит так:
<button class="btn btn-1 btn-1b">Кнопка b</button>
<button class="btn btn-1 btn-1c">Кнопка c</button>
<button class="btn btn-1 btn-1d">Кнопка d</button>
<button class="btn btn-1 btn-1e">Кнопка e</button>
<button class="btn btn-1 btn-1f">Кнопка f</button>
Для второго блока так:
<button class="btn btn-2 btn-2a">Кнопка a</button>
<button class="btn btn-2 btn-2b">Кнопка b</button>
<button class="btn btn-2 btn-2e">Кнопка e</button>
<button class="btn btn-2 btn-2f">Кнопка f</button>
<button class="btn btn-2 btn-2g">Кнопка g</button>
<button class="btn btn-2 btn-2h">Кнопка h</button>
Обратите внимание, что две кнопки: Кнопка c и Кнопка d отсутствуют в коде. Они имеют схожий ховер-эффект с предыдущими, поэтому я их исключила из блока, но в файле стилей они присутствуют.
Для третьего блока код такой:
<button class="btn btn-3 btn-3a icon-cart">В корзину</button>
<button class="btn btn-3 btn-3b icon-star-2">В закладки</button>
<button class="btn btn-3 btn-3d icon-cog">Настройки</button>
<button class="btn btn-3 btn-3e icon-arrow-right">Отправить</button>
Для четвертого блока:
<button class="btn btn-4 btn-4a icon-arrow-right">Подробнее</button>
<button class="btn btn-4 btn-4b icon-arrow-left">Вернуться</button>
<button class="btn btn-4 btn-4c icon-arrow-right">Подробнее</button>
<button class="btn btn-4 btn-4d icon-arrow-left">Вернуться</button>
Для пятого блока код следующий:
<button class="btn btn-5 btn-5a icon-cart"><span>В корзину</span></button>
<button class="btn btn-5 btn-5b icon-cart"><span>В корзину</span></button>
<button class="btn btn-5 btn-5a icon-cog"><span>Настроить</span></button>
<button class="btn btn-5 btn-5a icon-remove"><span>Удалить</span></button>
<button class="btn btn-5 btn-5b icon-remove"><span>Удалить</span></button>
<button class="btn btn-5 btn-5b icon-cog"><span>Настроить</span></button>
И для шестого блока код такой:
<button class="btn btn-6 btn-6a">Кнопка a</button>
<button class="btn btn-6 btn-6b">Кнопка b</button>
<button class="btn btn-6 btn-6d">Кнопка d</button>
<button class="btn btn-6 btn-6e">Кнопка e</button>
<button class="btn btn-6 btn-6g">Кнопка g</button>
<button class="btn btn-6 btn-6h">Кнопка h</button>
<button class="btn btn-6 btn-6j">Кнопка j</button>
<button class="btn btn-6 btn-6k">Кнопка k</button>
В данном блоке я из примера исключила кнопки с и f, но в файле стилей они присутствуют и если добавите по одной строке кода и для них, то в вашем блоке будут отображаться все 10 кнопок.
И завершающий шаг для тех, кто выбрал ховер с иконками. Чтобы на кнопках отображались иконки, следует в самом начале файла css изменить путь к папке Fonts, которую вы уже загрузили на сервер. Лучше указывать абсолютный путь к папке, сейчас там прописан адрес папки на моем сервере. Вы посмотрите на запись и нужный участок пути замените своими данными.
На этом подключение ховер-эффектов к кнопке завершено! Загружаете страницу с кнопкой на хостинг и проверяете работу ховера.
Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).
P.S. Подписчики в этом выпуске рассылки бесплатно получат подборку графики для сайта: кнопки, иконки, заголовки, тени, полки, стрелки и т.д., всего 13 модулей стоимостью 790 рублей.
Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!