Призрачные кнопки с определением направления наведения в CSS

Призрачные кнопки с определением направления наведения в CSS

От автора: меня бы удивило, если бы вы никогда не сталкивались с призрачными кнопками. Вы знаете их: у них прозрачный фон, который при наведении заливается сплошным цветом. В данной статье мы создадим призрачную кнопку в CSS, но это будет просто. Забавная и хитрая часть — это анимировать заливку этой призрачной кнопки так, чтобы фон заливался цветом в направлении, в котором на нее наводится курсор.

Вот с чего мы начинаем:

В большинстве случаев для заливки сплошным цветом background-color используется transition. Существуют макеты, в которых кнопка может заполняться слева направо, сверху вниз и т. д., для некоторого визуального изящества. Например, вот слева направо:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Тут есть моменты UX, к которым можно придираться. Например, если вы наводите курсор против направления заливки. Рассмотрим этот пример. Кнопка заливается слева, а вы наводите курсор справа.

Призрачные кнопки с определением направления наведения в CSS

Лучше, если кнопка заливается с начальной точки наведения.

Призрачные кнопки с определением направления наведения в CSS

Итак, как мы можем реализовать для кнопки определение направления наведения? Вашей первой мыслью может быть использовать решение на JavaScript, но вместо этого мы можем создать что-то с помощью CSS и небольшой дополнительной разметки.

Вот несколько чистых CSS кнопок-призраков с определением направления!

Давайте рассмотрим это шаг за шагом. Весь код доступен в этой коллекции CodePen.

Создание основы

Давайте начнем с создания основы призрачной кнопки. Разметка проста.

Наша CSS реализация будет использовать пользовательские свойства CSS. Это облегчает обслуживание. Они также позволяют легко выполнять настройку.

Объединение всего этого дает нам это:

Здорово! У нас есть кнопка и эффект наведения, но мы не можем ее закрасить цветом. Давайте сделаем это.

Добавление заливки

Для этого мы создаем элементы, которые показывают закрашенное состояние призрачной кнопки. Хитрость заключается в том, чтобы обрезать эти элементы через clip-path и скрыть их. Мы можем отобразить их при наведении курсора на кнопку путем перехода clip-path.

Призрачные кнопки с определением направления наведения в CSS

Дочерний элемент с 50% обрезки

Они должны совпадать с родительской кнопкой. Переменные CSS здесь очень помогут.

На первый взгляд, мы могли бы использовать псевдо-элементы. Однако этого не будет достаточно. Они также будут ухудшать доступность… но об этом позже.

Давайте начнем с добавления базовой заливки слева направо при наведении курсора. Во-первых, давайте добавим span. Этот span должен содержать тот же текстовый контент, что и кнопка.

Теперь нам нужно выровнять span с кнопкой. Переменные CSS сделают эту тяжелую работу.

Наконец, мы обрезаем span вне поля зрения и добавляем правило, которое будет отображать его при наведении, обновляя обрезку. И в завершении мы определяем переход.

Добавление определения направления

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

Призрачные кнопки с определением направления наведения в CSS

Четыре сегмента :hover

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Давайте добавим четыре span к кнопке и расположим их так, чтобы заполнить кнопку.

Мы можем настроить выбор каждого элемента и назначить обрезку и цвет с помощью переменных CSS.

Здорово. Чтобы проверить это, давайте изменим непрозрачность при наведении.

Призрачные кнопки с определением направления наведения в CSS

Но есть проблема. Если мы наведем курсор через один элемент, а затем переместим его на другой, направление заливки изменится. Это будет отвлекать. Чтобы исправить это, мы можем установить z-index и clip-path при наведении, чтобы сегмент заполнял все пространство.

Собираем все вместе

Мы знаем, как создать анимацию заливки, и мы знаем, как определить направление. Как мы можем объединить их? Используя комбинатор элементов одного уровня!

Это означает, что при наведении курсора на определенный сегмент мы можем обнаружить определенный элемент заливки. Во-первых, давайте обновим разметку.

Теперь мы можем обновить CSS. Ссылаясь на заливку слева направо, мы можем повторно использовать стилизацию. Нам нужно только установить конкретный clip-path для каждого элемента. Я использовал тот же порядок, что имеют значения некоторых свойств. Первый дочерний элемент — верхний, второй — правый и так далее.

Последняя часть — обновить соответствующий элемент clip-path при наведении сегмента.

Тада! У нас есть чистая кнопка-призрак с определением направления наведения на CSS.

Доступность

В своем текущем состоянии кнопка не соответствует критериям доступности.

Призрачные кнопки с определением направления наведения в CSS

Эти дополнительные элементы сбивают с толку, так как программа чтения с экрана будет повторять контент четыре раза. Нам нужно скрыть эти элементы от программы чтения с экрана.

Больше повторяющегося контента нет.

Вот и все! С помощью дополнительной разметки и некоторых хитростей CSS мы можем создавать призрачные кнопки с определением направления наведения. Используйте препроцессор или соберите компонент в своем приложении, и вам не нужно будет писать весь HTML. Вот демонстрация, использующая встроенные CSS-переменные для управления цветом кнопки.

Автор: Jhey Tompkins

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий