/* Класс для кнопки с эффектом заполнения снизу вверх */
.button-fill-up {
  position: relative; /* Необходимо для позиционирования псевдоэлемента */
  overflow: hidden; /* Обрезаем "заполняющий" элемент, чтобы он не выходил за границы кнопки */
  z-index: 1; /* Устанавливаем z-index для корректного наложения */
}

/* Псевдоэлемент, который будет создавать эффект заполнения */
.button-fill-up::after {
  content: ""; /* Обязательно для псевдоэлементов */
  position: absolute;
  bottom: 0; /* Начинаем снизу */
  left: 0;
  width: 100%; /* Ширина равна ширине кнопки */
  height: 0; /* Изначально высота 0 */
  background-color: #FAAE3A; /* Цвет заполнения */
  transition: height 0.3s ease; /* Плавный переход высоты */
  z-index: -1; /* Отправляем позади текста кнопки */
}

/* При наведении изменяем высоту псевдоэлемента */
.button-fill-up:hover::after {
  height: 100%; /* Заполняем всю кнопку */
}