Задать вопрос
@karmyskove

Как сделать похожую анимацию?

Всем привет) У веб-студии "creonit" прикольно сделана анимации при наведении на кнопку, как можно сделать похоже?
Интересует кнопка "Оставить заказ" в шапке.
Ссылка на сайт: https://creonit.ru/
Это сделано через keyframse+animation или нужно настроить функцию Cubic Bezier для свойства bacground-color?
  • Вопрос задан
  • 228 просмотров
Подписаться 2 Простой Комментировать
Решения вопроса 1
@thisuserhatephp
Офлайн - losers Онлайн - lusers
Это сделано через псевдо элементы before, after. Самой кнопке задается свойство
.btn {
   position: relative;
}

а псевдо элементу
.btn:before {
    content: '';
    position: absolute;
    left: -25px;
    bottom: -30px;
    width: 30px;
    height: 30px;
    background: blue;
    transition: .8s ease;
    border-radius: 25px;
    z-index: -1;
}


далее при .btn:hover обращаемся к псевдо элементу
и задаем позицию и высоту с шириной
.btn:hover:before {
}


демка
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
02 февр. 2025, в 12:33
3000 руб./за проект
02 февр. 2025, в 12:27
5000 руб./за проект
02 февр. 2025, в 11:35
3000 руб./за проект