Создание анимированных кнопок

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

Опубликовано 17.03.2025
Просмотры 6
Автор
Рек. время прохождения 4 минуты
Упражнений 7
Комментарии 0
Тренажер CSS

Эта серия упражнений поможет вам попрактиковаться в создании различных эффектов анимации для кнопок с использованием CSS. Вы будете работать с псевдоклассами, псевдоэлементами, свойствами `transition` и `transform`, а также с `@keyframes` для создания более сложных анимаций. Каждое задание представляет собой HTML-структуру и CSS-стили с пропусками, которые вам нужно будет заполнить, чтобы достичь желаемого визуального эффекта. Сложность заданий постепенно возрастает, начиная от простых эффектов при наведении до более комплексных анимаций.

Список тем

Плавное изменение фона при наведении

Самый простой способ добавить интерактивности кнопке — изменить её фон при наведении курсора. Ваша задача — сделать так, чтобы цвет фона кнопки плавно менялся на другой при наведении мыши. Используйте псевдокласс для состояния наведения и свойство transition для плавности.

CSS
.animated-button {
  background-color: #3498db;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  /* Добавьте плавный переход для свойства background-color */
  input1: background-color input2 ease;
}

/* Добавьте стили для состояния наведения */
.button-1:input3 {
  background-color: #2980b9;
}
HTML
<button class="animated-button button-1">Наведи на меня</button>
Чтобы применить стили при наведении курсора, используйте псевдокласс `:hover`. Для создания плавного перехода между состояниями используйте свойство `transition`. Укажите анимируемое свойство (`background-color`) и длительность перехода (`transition-duration`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Увеличение кнопки при наведении

Сделаем кнопку немного динамичнее. При наведении курсора она должна плавно увеличиваться в размере. Вам нужно использовать свойство `transform` для масштабирования и `transition` для плавности.

CSS
.animated-button {
  background-color: #2ecc71;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  /* Добавьте плавный переход для трансформации */
  input1: transform 0.3s ease;
}

.button-2:hover {
  /* Примените трансформацию для увеличения */
  input2: input3(1.1);
}
HTML
<button class="animated-button button-2">Увеличь меня</button>
Используйте псевдокласс `:hover` для состояния наведения. Для изменения размера элемента без влияния на поток документа используйте свойство `transform` со значением `scale()`. Например, `scale(1.1)` увеличит элемент на 10%. Не забудьте добавить `transition` к основному стилю кнопки, чтобы анимация была плавной, указав свойство `transform` и длительность.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Сдвиг кнопки вверх при наведении

Добавим кнопке эффект 'всплытия'. При наведении курсора кнопка должна плавно сдвигаться немного вверх. Используйте `transform` для сдвига и `transition` для плавности.

CSS
.animated-button {
  background-color: #e74c3c;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  /* Добавьте плавный переход для трансформации */
  transition: input1 0.3s ease;
}

.button-3:input2 {
  /* Примените трансформацию для сдвига вверх */
  transform: input3(-5px);
}
HTML
<button class="animated-button button-3">Подними меня</button>
Для сдвига элемента по вертикали используйте функцию `translateY()` свойства `transform`. Отрицательное значение (например, `translateY(-5px)`) сдвинет элемент вверх. Не забудьте применить `transition` к свойству `transform` в основном классе кнопки для плавной анимации.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Пульсирующая кнопка с помощью @keyframes

Создайте эффект пульсации для кнопки, используя CSS-анимацию. Кнопка должна периодически немного увеличиваться и возвращаться к исходному размеру. Вам нужно определить анимацию с помощью `@keyframes` и применить её к кнопке.

CSS
/* Определите анимацию пульсации */
input1 pulse-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.animated-button {
  background-color: #9b59b6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.button-4 {
  /* Примените анимацию */
  input2: pulse-animation;
  input3: 2s;
  input4: infinite;
}
HTML
<button class="animated-button button-4">Пульс</button>
Сначала определите анимацию с помощью правила `@keyframes`, дав ей имя (например, `pulse`). Внутри `@keyframes` опишите ключевые кадры анимации (например, на 0%, 50% и 100%). Используйте `transform: scale()` для изменения размера. Затем примените эту анимацию к кнопке с помощью свойства `animation`, указав имя анимации (`animation-name`), длительность (`animation-duration`) и количество повторений (`animation-iteration-count: infinite` для бесконечной анимации).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Эффект 'Shine' при наведении

Создайте эффект блика (shine), который проходит по кнопке при наведении курсора. Это достигается с помощью псевдоэлемента, который перемещается под основной кнопкой.

CSS
.animated-button {
  background-color: #1abc9c;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  /* Добавьте позиционирование и скрытие */
  input1: relative;
  input2: hidden;
}

.button-5::before {
  content: "";
  input3: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  /* Добавьте плавный переход для движения */
  transition: left 0.6s ease;
}

/* Анимация при наведении */
.button-5:hover::input4 {
  left: 100%;
}
HTML
<button class="animated-button button-5">Блик</button>
Используйте псевдоэлемент `::before`. Задайте ему `position: absolute`, растяните на всю высоту кнопки (`top: 0`, `bottom: 0`), задайте начальное положение слева за пределами кнопки (`left: -100%`) и ширину (`width: 100%`). Сделайте его полупрозрачным градиентом (например, `linear-gradient(to right, transparent, rgba(255,255,255,0.5), transparent)`). Для родительской кнопки установите `position: relative` и `overflow: hidden`. При наведении (`:hover::before`) измените `left` псевдоэлемента на `100%`, чтобы он проехал сквозь кнопку. Добавьте `transition` к псевдоэлементу для плавного движения.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Анимация границы при наведении

Сделайте так, чтобы при наведении на кнопку её граница плавно 'рисовалась' по периметру. Это можно реализовать с помощью двух псевдоэлементов.

CSS
.animated-button {
  background-color: transparent;
  color: #3498db;
  padding: 12px 24px;
  border: 2px solid #3498db;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  transition: color 0.3s ease;
}

.button-6::before,
.button-6::after {
  content: '';
  input1: absolute;
  background-color: #e74c3c; /* Цвет анимированной границы */
  transition: all 0.3s ease;
}

/* Горизонтальные линии */
.button-6::before {
  height: 2px;
  width: 0;
  top: 0;
  left: 0;
}

/* Вертикальные линии */
.button-6::after {
  width: 2px;
  height: 0;
  bottom: 0;
  right: 0;
}

.button-6:hover {
  color: #e74c3c; /* Изменение цвета текста при наведении */
}

.button-6:hover::input2 {
  width: 100%;
}

.button-6:hover::input3 {
  height: 100%;
}
HTML
<button class="animated-button button-6">Граница</button>
Используйте два псевдоэлемента (`::before` и `::after`). Задайте кнопке `position: relative`. Псевдоэлементам задайте `position: absolute`, `content: ''`. `::before` будет отвечать за верхнюю и нижнюю границы: `height: 2px`, `width: 0`, `background-color: white`, `top: 0`, `left: 0`. При наведении (`:hover::before`) установите `width: 100%`. `::after` будет отвечать за левую и правую границы: `width: 2px`, `height: 0`, `background-color: white`, `bottom: 0`, `right: 0`. При наведении (`:hover::after`) установите `height: 100%`. Добавьте `transition` к `width` для `::before` и к `height` для `::after` для плавной анимации.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Кнопка с иконкой, появляющейся при наведении

Добавьте иконку справа от текста кнопки, которая плавно появляется и немного сдвигается при наведении курсора. Используйте псевдоэлемент `::after` для иконки.

CSS
.animated-button {
  background-color: #f1c40f;
  color: #333;
  padding: 12px 35px 12px 24px; /* Добавили место справа */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  position: relative; /* Нужно для позиционирования ::after */
  transition: background-color 0.3s ease;
}

.button-7::after {
  content: '\27A4'; /* Unicode стрелка */
  input1: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) translateX(-5px);
  input2: 0;
  transition: input3 0.3s ease, input4 0.3s ease;
}

.button-7:hover {
  background-color: #f39c12;
}

.button-7:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
HTML
<button class="animated-button button-7">Вперед</button>
Используйте псевдоэлемент `::after`. Задайте ему `content` со значком (например, `content: ' \2192'` для стрелки →). Спозиционируйте его абсолютно (`position: absolute`) справа от текста. В обычном состоянии сделайте его невидимым (`opacity: 0`) и немного сдвинутым (`transform: translateX(-5px)`). При наведении на кнопку (`:hover::after`) установите `opacity: 1` и `transform: translateX(0)`. Добавьте `transition` к псевдоэлементу для свойств `opacity` и `transform`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру