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

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

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

button {
 background-color: blue;
 transition: 0.5s;
}
button:hover {
 background-color: red;
}

Использование 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

Код примера скопирован в буфер
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   .btn {
    padding: 0.5em 1.5em; /* Расстояние от текста до края */
    background-color: #71b2ae; /* Цвет фона */
    color: #fff; /* Белый цвет текста */
    border: none; /* Убираем рамку */
    font-size: 1em; /* Размер шрифта */
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3); /* Тень у надписи */
    margin-right: 1rem; /* Расстояние справа */
    transition: background-color 0.4s, box-shadow 0.2s 0.3s; /* Время перехода */
   }
   .btn:hover {
    background-color: #3f8a7c; /* Цвет фона */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3f8a7c; /* Тень в виде рамки */
   }
  </style>
 </head>
 <body>
  <p>
   <button class="btn">Кнопка</button>
   <button class="btn">Кнопка</button>
   <button class="btn">Кнопка</button>
  </p>
 </body>
</html>

Использование 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

Код примера скопирован в буфер
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   .btn {
    padding: 0.5em 1.5em; /* Расстояние от текста до края */
    background-color: #ec894a; /* Цвет фона */
    border: none; /* Убираем рамку */
   }
   .btn:hover {
    animation: flip 1s; /* Название и время анимации */
   }
   @keyframes flip {
    0%, 100% { transform: rotateX(0); }
    50% { transform: rotateX(-180deg); }
   }
  </style>
 </head>
 <body>
  <p>
   <button class="btn">Кнопка</button>
   <button class="btn">Кнопка</button>
   <button class="btn">Кнопка</button>
  </p>
 </body>
</html>

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

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

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

Animate.css

animate.style

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

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

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

animation: shakeX 1s;

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

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

Код примера скопирован в буфер
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <link rel="stylesheet" href="/example/css/animate.min.css">
  <style>
   .btn {
    padding: 0.5em 2em; /* Расстояние от текста до края */
    font-size: 0.9em; /* Размер шрифта */
    background-color: #323e4e; /* Цвет фона */
    color: #fff; /* Цвет текста */
    border: none; /* Убираем рамку */
   }
   .btn:hover {
    background-color: #de3a31; /* Цвет фона при наведении */
   }
   .btn:disabled {
    background-color: #dfdfdf; /* Цвет фона заблокированной кнопки */
   }
   .btn:disabled:hover {
    animation: shakeX 1s; /* Название и время анимации */
   }
  </style>
 </head>
 <body>
  <p>
   <button class="btn">Кнопка</button>
   <button class="btn" disabled>Кнопка</button>
   <button class="btn">Кнопка</button>
  </p>
 </body>
</html>

Hover.css

ianlunn.github.io/Hover/

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

<link href="css/hover-min.css" rel="stylesheet">

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

<button class="button hvr-pulse ">Добавить в корзину</button>

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

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

Код примера скопирован в буфер
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <link rel="stylesheet" href="/example/css/hover-min.css">
  <style>
   .btn {
    padding: 0.5em 2em; /* Расстояние от текста до края */
    font-size: 0.9em; /* Размер шрифта */
    background-color: #323e4e; /* Цвет фона */
    color: #fff; /* Цвет текста */
    border: none; /* Убираем рамку */
   }
  </style>
 </head>
 <body>
  <p>
   <button class="btn hvr-float-shadow">Кнопка</button>
   <button class="btn hvr-float-shadow">Кнопка</button>
   <button class="btn hvr-float-shadow">Кнопка</button>
  </p>
 </body>
</html>

Итого

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

Перейти к заданиям

Автор: Влад Мержевич
Последнее изменение: 12.04.2025

Вопрос 1 из 5

Какое стилевое правило устанавливает ключевые кадры анимации?
@movie
@frames
@animatin
@keyframes

Расставьте в правильном порядке.
.btn:hover {
  :  1s;
}
  {
  0% { : 0;  }
  100% { : 1;  }
}
@keyframesopacityfadeInanimationopacityfadeIn

Выберите из списка правильные варианты.
.btn {
  : 0.5em 1.5em;
  : #71b2ae;
  : none;
  : 1em;
  : 0.5s;
}
.btn:hover {
  : #3f8a7c;
}

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

Рис. 1

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

Рис. 1

Файлы

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

Рис. 1