Как сделать так, чтобы у 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>