@karmyskove

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

Всем привет) У веб-студии "creonit" прикольно сделана анимации при наведении на кнопку, как можно сделать похоже?
Интересует кнопка "Оставить заказ" в шапке.
Ссылка на сайт: https://creonit.ru/
Это сделано через keyframse+animation или нужно настроить функцию Cubic Bezier для свойства bacground-color?
  • Вопрос задан
  • 227 просмотров
Решения вопроса 1
thisuserhatephp
@thisuserhatephp
Ужастнее холокоста может быть только wordpress
Это сделано через псевдо элементы 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 {
}


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

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

Войти через центр авторизации
Похожие вопросы