Кнопка меняется при наведении html

Анимация кнопок при наведении

В прошлом уроке мы разобрали, как изменить стиль кнопки при наведении на неё курсора мыши. Для этой цели применяется псевдокласс :hover, а чтобы изменения происходили плавно, добавляется свойство transition, которое устанавливает время перехода.

Вот, к примеру, как в течение полсекунды поменять цвет фона кнопки с синего на красный.

Использование transition

Свойство transition достаточно гибкое и позволяет устанавливать: время перехода для каждого свойства отдельно; время задержки перед выполнением перехода; функцию времени, согласно которой происходит изменение.

Так, если понадобится задать разное время перехода для цвета фона и рамки, пишем следующее, разделяя параметры запятой:

transition: background-color 1s, border-color 0.5s;

В таком случае цвет фона будет меняться в течение одной секунды, а цвет рамки в течение полсекунды.

Если требуется сделать задержку перед началом изменения, то добавляем в конец ещё время:

transition: background-color 1s 0.5s;

Здесь при наведении на кнопку полсекунды ничего не происходит, а затем цвет фона меняется в течение одной секунды.

Рассмотрим добавление к кнопке рамки, сделанной через box-shadow. Да, это свойство добавляет тень, но вполне универсально, чтобы применяться, в том числе, и для формирования рамок у кнопок. Здесь используется две тени, одна поверх другой, что, в итоге, даёт зелёную рамку на некотором удалении от кнопки.

box-shadow: 0 0 0 2px #fff, /* Белая тень */ 0 0 0 4px #3f8a7c; /* Зелёная тень */

У кнопки при наведении будем менять цвет фона и после небольшой задержки показывать рамку. Для этого в transition запишем следующее:

transition: background-color 0.4s, box-shadow 0.2s 0.3s;

Окончательный код показан в примере 1.

Пример 1. Использование transition

Использование animation

Свойство transition имеет своё определённую роль и с его помощью нельзя сделать сложную анимацию элемента. Для этой цели предназначено свойство animation, работающее совместно с правилом @keyframes.

Сперва нашей анимации следует дать уникальное имя, пусть будет flip :

Теперь определяемся с ключевыми кадрами, которые задаются в процентах. Например, для вращения элемента нам понадобится два положения:

Конечное значение 100% в данном случае можно не указывать, поскольку оно совпадает с начальным.

Для вращения элемента используем свойство transform с функцией rotateX().

Теперь эту анимацию можно привязать к кнопке, добавив свойство animation к псевдоклассу :hover .

Саму анимацию можно воспроизвести несколько раз, добавив число повторений в конец набора значений:

animation: flip 1s 3; /* Повторяем три раза */

Или сделать анимацию бесконечной с помощью ключевого слова infinite .

animation: flip 1s infinite; /* Бесконечная анимация */

В примере 2 при наведении курсора мыши на кнопку она поворачивается один раз вокруг горизонтальной оси.

Пример 2. Использование @keyframes

Использование сторонних библиотек

Существуют готовые сторонние библиотеки CSS, предлагающие наборы различных анимаций. Принцип работы у них схожий — сперва подключается дополнительный CSS-файл, затем в своём стиле указывается желаемое имя анимации или к самому элементу добавляется определённый стилевой класс. Анимировать подобным образом можно не только кнопки, но и другие элементы — ссылки, изображения и т. д.

Ниже рассмотрим пару популярных библиотек.

Animate.css

Эту библиотеку можно установить через npm, Yarn или добавить напрямую через CDN:

После чего на сайте выбираем понравившуюся анимацию и вставляем её имя в свойство animation . Обязательно следует добавить и продолжительность самой анимации:

В примере 3 при наведении курсора на заблокированную кнопку она трясётся по горизонтали. Для анимации не всех кнопок, а только с атрибутом disabled , используем комбинацию псевдоклассов :disabled:hover .

Пример 3. Использование библиотеки Animate.css

Hover.css

Эта библиотека содержит набор разных эффектов с анимацией, иконками, тенями, уголками и рамками. Сама библиотека устанавливается через npm, Bower или скачивается напрямую с сайта GitHub. После этого подключается как обычный CSS-файл:

Эффекты для элемента работают путём добавления соответствующего класса к элементу. Все классы Hover.css начинаются с префикса hvr-, после чего идёт имя эффекта. К примеру, для создания пульсирующей кнопки при наведении, указываем класс hvr-pulse :

В примере 4 при наведении курсора мыши на кнопку она поднимается вверх и под кнопкой добавляется тень.

Пример 4. Использование библиотеки Hover.css

Итого

• Для плавного изменения значений стилевых свойств при наведении на кнопку курсора мыши используется свойство transition.
• Сложная анимация делается с помощью ключевых кадров через правило @keyframes.
• Сама анимация применяется к кнопке через псевдокласс :hover и свойство animation.
• Готовые стилевые библиотеки для анимации позволяют упростить создание эффектов для кнопок.

Создайте кнопку, чтобы при наведении на неё курсора мыши у неё плавно появлялась тень, как показано на рис. 1.

Создайте кнопку, чтобы при наведении на неё курсора мыши вокруг кнопки плавно появлялся контур (рис. 1).

Создайте кнопку, чтобы при наведении на неё курсора мыши внутри кнопки плавно появлялась рамка (рис. 1).

См. также

• :focus на мобильных устройствах
• animation
• box-shadow
• transition
• Анимация
• Анимация в CSS
• Анимация ссылок при наведении
• Всплывающая подсказка
• Добавление тени
• Добавление треугольника
• Оформление кнопок
• Переходы
• Переходы и анимация
• Переходы с помощью :hover
• Работа с типографикой
• Сочетание с псевдоклассами
• Трансформация в CSS

Рецепты

Источник

Hover — эффекты при наведении

Мы задали цвет фона и текста, радиусы закругления, размер шрифта, отступы. Для анимации используем transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в течение 500 миллисекунд.

Горизонтальная заполнение

Полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.

Чтобы достичь такого результата, нужно использовать псевдо-элемент :before:

Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Зададим ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:

Вертикальное заполнение

Если анимировать высоту, то заполнение произойдёт сверху.

 button:before < content:''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: rgba(255,255,255,0.3); border-radius: 5px; transition: all 2s ease; >button:hover:before

Инвертирование цвета

Инвертируем цвет внутри кнопки и добавляем границу:

Пунктирная граница

Добавим границу у кнопки и инвертируем цвета:

Появление значка

При наведении значок плавно появиться слева от текста.

Подключим шрифт со значками Font Awesome.

Увеличим внутренний отступ, чтобы для значка было место, и добавим свойство overflow со значением hidden:

Далее добавляем значок из шрифта Font Awesome в псевдо-элемент before и размещаем его за пределами кнопки:

Осталось установить свойство left:

Эффект подпрыгивания

Для данной анимации установим несколько ключевых кадров (keyframes):

Подключаем созданную анимацию:

Искажение

В CSS3 появилась возможность использовать искажения:

3D-поворот

Самый сложный эффект. Используем поворот кнопки для отображения другого сообщения, которое мы добавим в псевдо-элемент after у нашей кнопки.

Зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:

Установим правила для псевдо-элемента after:

Правила добавлены сверху, перед кнопкой, и выставлены такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, установлен нижний левый угол элемента и указано вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:

Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.

Источник