Как сделать так, чтобы у hover transition был 0.5s, а у action transition 2s?

    .decorationstart {
    background-color: #fff;
    margin: 5% 43%;
    height: 4rem;
    width: 12rem;
    border-radius: 3rem;
    box-shadow: 0 0 10px rgb(0, 0, 0);
    transition-property: border-radius, background-color, box-shadow;
    transition-duration: 0.5s;
}

.decorationstart:hover {
    background-color: #f72585;
    box-shadow: 0 0 20px #f72585;
    border-radius: 1rem;
}

.decorationstart:active {
    box-shadow: 0 0 20px black;
}

Ответы (1 шт):

Автор решения: Vladimir Gonchar

Ну так и прописывайте скорость для :active отдельно, всё будет работать.

    .decorationstart {
    background-color: #fff;
    margin: 5% 43%;
    height: 4rem;
    width: 12rem;
    border-radius: 3rem;
    box-shadow: 0 0 10px rgb(0, 0, 0);
    transition-property: border-radius, background-color, box-shadow;
    transition-duration: 0.5s;
}

.decorationstart:hover {
    background-color: #f72585;
    box-shadow: 0 0 20px #f72585;
    border-radius: 1rem;
}

.decorationstart:active {
    box-shadow: 0 0 20px black;
    transition-duration: 2s;
}
<button class="decorationstart">ЖМИ!!!</button>

→ Ссылка