Hover — эффекты при наведении
Мы задали цвет фона и текста, радиусы закругления, размер шрифта, отступы. Для анимации используем transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в течение 500 миллисекунд.
Горизонтальная заполнение
Полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.
Чтобы достичь такого результата, нужно использовать псевдо-элемент :before:
button:before
Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Зададим ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:
button:hover:before
Вертикальное заполнение
Если анимировать высоту, то заполнение произойдёт сверху.
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
Инвертирование цвета
Инвертируем цвет внутри кнопки и добавляем границу:
button:hover
Пунктирная граница
Добавим границу у кнопки и инвертируем цвета:
button < border: 3px solid #3a7999; >button:hover
Появление значка
При наведении значок плавно появиться слева от текста.
Подключим шрифт со значками Font Awesome.
Увеличим внутренний отступ, чтобы для значка было место, и добавим свойство overflow со значением hidden:
button
Далее добавляем значок из шрифта Font Awesome в псевдо-элемент before и размещаем его за пределами кнопки:
button:before
Осталось установить свойство left:
button:hover:before
Купи что-нибудь
Эффект подпрыгивания
Для данной анимации установим несколько ключевых кадров (keyframes):
@keyframes bounce < 0%, 20%, 60%, 100% < transform: translateY(0); transform: translateY(0); >40% < transform: translateY(-20px); transform: translateY(-20px); >80% < transform: translateY(-10px); transform: translateY(-10px); >>
Подключаем созданную анимацию:
button:hover
Искажение
В CSS3 появилась возможность использовать искажения:
button:hover
3D-поворот
Самый сложный эффект. Используем поворот кнопки для отображения другого сообщения, которое мы добавим в псевдо-элемент after у нашей кнопки.
Зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:
button
Установим правила для псевдо-элемента after:
button:after
Правила добавлены сверху, перед кнопкой, и выставлены такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, установлен нижний левый угол элемента и указано вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:
button:hover
Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.
Как изменить цвет кнопки?
Для изменения цвета фона и текста кнопки используем, соответственно, свойства background и color, добавляя их к селектору button , как показано в примере 1.
Пример 1. Цветные кнопки
Основные параметры кнопки применяем к селектору button , а дополнительно вводим разные классы, чтобы легко менять цвет кнопок. На рис. 1 продемонстрирован результат данного примера, в котором создаются плоские одноцветные кнопки.
Рис. 1. Цветные кнопки
См. также
- background
- color
- currentColor
- text-fill-color
- Атрибут link
- Атрибуты
- Единицы цвета в CSS
- Кнопки
- Кнопки
- Кнопки в Bootstrap 4
- Линейный градиент
- Наследование в CSS
- Несколько фоновых картинок
- Работа с типографикой
- Создание кнопок
- Спрайты
- Установка фона и градиента
- Фоновая картинка
Анимация кнопок при наведении
В прошлом уроке мы разобрали, как изменить стиль кнопки при наведении на неё курсора мыши. Для этой цели применяется псевдокласс :hover, а чтобы изменения происходили плавно, добавляется свойство transition, которое устанавливает время перехода.
Вот, к примеру, как в течение полсекунды поменять цвет фона кнопки с синего на красный.
button < background-color: blue; transition: 0.5s; >button:hover
Использование 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 :
@keyframes flip
Теперь определяемся с ключевыми кадрами, которые задаются в процентах. Например, для вращения элемента нам понадобится два положения:
- 0% — исходное положение элемента;
- 50% — элемент повёрнут на 180°.
Конечное значение 100% в данном случае можно не указывать, поскольку оно совпадает с начальным.
@keyframes flip < 0% <>50% <> >Для вращения элемента используем свойство transform с функцией rotateX().
@keyframes flip < 0% < transform: rotateX(0); >50% < transform: rotateX(180deg); >>Теперь эту анимацию можно привязать к кнопке, добавив свойство animation к псевдоклассу :hover .
button:hover < animation: flip 1s; /* Название и время анимации */ >Саму анимацию можно воспроизвести несколько раз, добавив число повторений в конец набора значений:
animation: flip 1s 3; /* Повторяем три раза */Или сделать анимацию бесконечной с помощью ключевого слова infinite .
animation: flip 1s infinite; /* Бесконечная анимация */В примере 2 при наведении курсора мыши на кнопку она поворачивается один раз вокруг горизонтальной оси.
Пример 2. Использование @keyframes
Использование сторонних библиотек
Существуют готовые сторонние библиотеки CSS, предлагающие наборы различных анимаций. Принцип работы у них схожий — сперва подключается дополнительный CSS-файл, затем в своём стиле указывается желаемое имя анимации или к самому элементу добавляется определённый стилевой класс. Анимировать подобным образом можно не только кнопки, но и другие элементы — ссылки, изображения и т. д.
Ниже рассмотрим пару популярных библиотек.
Animate.css
Эту библиотеку можно установить через npm, Yarn или добавить напрямую через CDN:
После чего на сайте выбираем понравившуюся анимацию и вставляем её имя в свойство animation . Обязательно следует добавить и продолжительность самой анимации:
animation: shakeX 1s;В примере 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.
- Готовые стилевые библиотеки для анимации позволяют упростить создание эффектов для кнопок.
Автор: Влад Мержевич
Последнее изменение: 13.06.2023
Создайте кнопку, чтобы при наведении на неё курсора мыши у неё плавно появлялась тень, как показано на рис. 1.
Создайте кнопку, чтобы при наведении на неё курсора мыши вокруг кнопки плавно появлялся контур (рис. 1).
Создайте кнопку, чтобы при наведении на неё курсора мыши внутри кнопки плавно появлялась рамка (рис. 1).
См. также
- :focus на мобильных устройствах
- animation
- box-shadow
- transition
- Анимация
- Анимация в CSS
- Анимация ссылок при наведении
- Всплывающая подсказка
- Добавление тени
- Добавление треугольника
- Оформление кнопок
- Переходы
- Переходы и анимация
- Переходы с помощью :hover
- Работа с типографикой
- Сочетание с псевдоклассами
- Тени у
- Трансформация в CSS
Рецепты
- Как изменить вид нажатой кнопки?
- Как плавно изменить цвет ссылки?
- Как сделать мигающий текст?
Как изменить цвет кнопки при наведении?
Есть сайт almazsistem.ru
Цель: Нужно чтобы при наведении на кнопку, её цвет меняется с основного (#d2051e) на более светлый (#ff0826).
Сейчас я специально поменял цвет при наведении на белый, но на странице, при наведении, он выводится серым, будто его что-то перекрывает:
.button.primary:hover
Весь css в инспекторе облазил, ничего не видно, полюбому цвет меняет JS.
Подскажите какой код приписать или убрать, и от куда, чтобы заработало. Спасибо
- Вопрос задан более двух лет назад
- 64 просмотра