Постановка задачи

Для кнопки необходимо создать нестандартный CSS-эффект наведения мыши (hover), где одни и те же CSS-свойства будут применяться с разными параметрами анимации при входе и выходе курсора.

Требования

• Определить CSS-свойства, которые изменяются при наведении (например, ширина, цвет, прозрачность). Они одинаковы для обоих состояний.
• Для входа в hover (наведение) задать собственные transition-duration и transition-delay.
• Для выхода из hover (снятие наведения) - другие значения этих же свойств. Длительность и задержка должны подчиняться обратной логике, чтобы визуальный эффект распада отличался от эффекта появления.
• Эффекты должны быть реализованы через псевдоэлементы ::after и ::before. (Например, формирование подложки, изменение размеров границ или overlay).

Условия выполнения

• Код статичен - только HTML и CSS. JavaScript не используется.
• Не допускается реверс CSS-кадров (animation). Работа исключительно на CSS transition с разными параметрами для двух направлений.
• Фреймворк для стилей - произвольный (чистый CSS / SCSS / Tailwind).