@-webkit-keyframes btn-change {
    0% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    10% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    20% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    30% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    40% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    50% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    60% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    70% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color))
    }

    80% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color))
    }

    90% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color))
    }

    to {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),to(var(--bg-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color));
        color: var(--action-color)
    }
}

@keyframes btn-change {
    0% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    10% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    20% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    30% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    40% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    50% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    60% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color),var(--action-color))
    }

    70% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color),var(--action-color))
    }

    80% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--action-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color),var(--action-color))
    }

    90% {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),to(var(--action-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--action-color))
    }

    to {
        background-image: -webkit-gradient(linear,left bottom,left top,from(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),color-stop(var(--bg-color)),to(var(--bg-color)));
        background-image: linear-gradient(0deg,var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color));
        color: var(--action-color);
    }
}