UI-компоненты. Анимированные кнопки на CSS

Создадим 5 красивых анимированных кнопок на CSS3. В этом примере код HTML создает 5 кнопок с разными именами классов. Код CSS стилизует и анимирует кнопки с помощью псевдокласса :hover, который запускает анимацию, когда пользователь наводит курсор на кнопку. К каждой кнопке применяется своя анимация с использованием свойства преобразования.

Пример, который мы сделаем:

HTML:

<button class="btn1">Button 1</button>
<button class="btn2">Button 2</button>
<button class="btn3">Button 3</button>
<button class="btn4">Button 4</button>
<button class="btn5">Button 5</button>

CSS:

/* Общие стили для кнопок */
button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 20px;
}

/* Кнопка 1 */
.btn1 {
  background-color: blue;
  color: white;
}

/* Анимация для кнопки 1 при наведении */
.btn1:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn2 {
  background-color: green;
  color: white;
}

.btn2:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn3 {
  background-color: orange;
  color: white;
}

.btn3:hover {
  transform: rotate(360deg);
}

.btn4 {
  background-color: red;
  color: white;
}

.btn4:hover {
  transform: skew(15deg);
}

.btn5 {
  background-color: purple;
  color: white;
}

.btn5:hover {
  transform: scale(0.9);
}