Как исправить переход background из hover в active?

Question

[Dubrovin]

Здравствуйте,
ломаю голову весь день, не понимаю, почему когда наводишь на кнопку (состояние hover) и потом кликаешь по ней (hover меняется на active) фон кнопки меняется через какое-то третье состояние (фон hover > прозрачный > фон active).
Нужно сделать чтобы фон менялся плавно от зелёного градиента до тёмного.
Песочница: https://codepen.io/anon/pen/GXWrKo

Comments

[Александр]

Можно вопрос, а зачем вас столько псевдоэлементов? Без них же все легко и просто будет работать

[Dubrovin]

Александр, before для градиентной обводки, after для заливки фона. Градиенты не поддерживают транзиент в CSS, поэтому чтобы сделать появление фона (например, при ховере) плавным, нужно управлять opacity. - Это первая причина. Вторая причина - уровни переопределения кнопки, чтобы можно было выбрать подходящий дизайн.