В прошлом уроке мы разобрали, как изменить стиль кнопки при наведении на неё курсора мыши. Для этой цели применяется псевдокласс :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.
- Готовые стилевые библиотеки для анимации позволяют упростить создание эффектов для кнопок.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 13.06.2023