То, что я хочу, это сделать кнопку, которая исчезает в другом цвете, когда мышь наводит на нее курсор, но мгновенно меняет цвет при щелчке. Другими словами, цвет будет меняться медленно, когда мышь входит или выходит из него, но резко, когда пользователь нажимает кнопку мыши или отпускает ее.
Проблема в том, что я не могу отделить их друг от друга. Вот что я пробовал:
<html>
<head>
<style>
button {
width: 40vw;
height: 20vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid gray;
border-radius: 0;
cursor: pointer;
transition-duration: 0.7s;
}
button:hover {
background-color: lightgray;
}
button:active {
background-color: darkgray;
transition-duration: 0s;
}
</style>
</head>
<body>
<button>
Click here
</button>
</body>
</html>
К сожалению, свойство transition-duration
внутри правила button:active
влияет на переход только одним способом, а не другим. Переход длится 0 секунд при нажатии кнопки, но длится 0,7 секунды при отпускании.
Причина в том, что на самом деле это переход к button:hover
. Но я не могу добавить transition-duration: 0s
в правило button:hover
, потому что я все еще хочу, чтобы переход был плавным, когда мышь входит в кнопку. И я не могу отличить случай, когда предыдущий селектор был button
, от того, где он был button:active
.
Я мог бы использовать события JavaScript, но проблема кажется достаточно простой, чтобы иметь решение только для CSS.
Редактировать: Я почти обошел это следующим кодом, который отлично работал бы, если бы вы не вводили кнопку снова после первого нажатия. Поскольку он все еще сфокусирован, на этот раз переход будет немедленным.
button:hover {
background-color: lightgray;
}
button:focus {
background-color: lightgray;
transition-duration: 0s;
}
button:active {
background-color: darkgray;
transition-duration: 0s;
}
button:not(:hover) {
background-color: #efefef;
transition-duration: 0.7s;
}
Не используйте одно и то же свойство, и вы можете это сделать. Используйте background-image
и градиент, чтобы цвет был в активном состоянии, и это не вызовет переход.
button {
width: 40vw;
height: 20vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid gray;
border-radius: 0;
cursor: pointer;
transition-duration: 0.7s;
}
button:hover {
background-color: lightgray;
}
button:active {
background-image: linear-gradient(darkgray 0 0);
}
<button>Click here</button>