Hover-эффекты для кнопок на чистом CSS3

Приветствую всех посетителей сайта! По просьбе подписчиков сегодня рассматриваем тему ховеров для кнопок. Что такое hover-эффект? Для тех, кто еще не в курсе, подсказываю - это изменение внешнего вида кнопки при наведении на нее курсора мыши.

Ховер-эффекты бывают самыми разнообразными: смена цвета, добавление градиента, тени, свечения, рамок, всплывающих подсказок, появление иконок и мини-стрелок, трансформация (увеличение, наклон, смещение и т.д.)...

Реализация таких эффектов обычно достигается двумя методами: с помощью различных плагинов jQuery либо на чистом CSS3. Сегодня мы рассмотрим примеры кнопок с ховер-эффектом, созданных с помощью CSS3, без подключения javascript-библиотек. Для новичков данный вариант проще в установке, так как требует всего лишь добавления небольшого кода в тело страницы и подключения стилей для оформления кнопки.

Динамичные кнопки (с эффектами при наведении и клике) нынче являются обычным явлением при разработке веб-сайтов. Самыми популярными ховер-эффектами по-прежнему остаются смена цвета, добавление рамок или границ и появление иконок либо видоизменение имеющихся внутри кнопки.

Ниже мы на примерах рассмотрим несколько популярных ховер-эффектов для веб-кнопок. Реализация их довольна проста и по силам начинающим вебмастерам. Технических знаний вам при этом не понадобится, так что реализовать любой понравившийся эффект вам не составит особого труда.

Изменить стилевое оформление кнопки, чтобы идеально вписать ее в дизайн своего сайта, можно в файле стилей. Именно там прописываются цвет кнопки и градиента, задается тень, рамки и прочие элементы оформления, а также настраивается анимация - плавное появление того или иного ховер-эффекта.

Обращаю ваше внимание на то, что все hover-эффекты будут корректно работать только в современных браузерах, поддерживающих свойства CSS3: IE9+, Opera 10+, Firefox 3.6+, Chrome 12+, Safari 5+, Яндекс.Браузер. Более ранние версии браузеров могут не отображать ховер-эффекты либо отображать их некорректно.

Что ж, давайте перейдем к примерам.

1. Ховеры с заливкой фона. В данном блоке 6 примеров hover-эффекта с различными вариантами заполнения бэкграунда кнопки.

Как видите, любую кнопку можно сделать динамичной, добавив к ней 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 рублей.

Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!

Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
??????.???????
ПОДРОБНЕЕ

Не забудь заглянуть в свою почту и подтвердить подписку!
2. Ховеры с эффектом нажатия. В этом блоке 6 примеров ховеров с 3D-эффектом. При наведении курсора на эти кнопки происходит эффект нажатия, то есть создается впечатление, что вы действительно на них нажали, словно это кнопки на клавиатуре.
3. Ховеры с эффектом затемнения. В этом блоке 4 примера кнопок с легким затемнением фона. В данных кнопках дополнительно используются иконки из приложения icomoon. Точнее сказать - иконочный шрифт, аналог известного Font Awesome. Иконки можно заменить на любые другие, посетив сайт Icomoon.com и выбрав более подходящие.
4. Ховеры с затемнением и динамическими иконками. В данных примерах происходит не только смена фона (можно задать любые цвета), но и оживление кнопок за счет появления стрелочек. Стрелочки -это то же иконки из приложения icomoon.
5. Ховеры с заменой контента. При наведении курсора надпись на кнопках заменяется иконкой, вернее иконочным шрифтом из того же icomoon. Шесть примеров с двумя направлениями появления иконок - горизонтальным и вертикальным.
6. Ховеры с изменением фона и добавлением границ. Восемь примеров  разных рамок для прямоугольной кнопки и кнопки с закругленными краями.