Делать двусторонние объявления перехода или переходы, учитывающие ранее активный псевдокласс?

То, что я хочу, это сделать кнопку, которая исчезает в другом цвете, когда мышь наводит на нее курсор, но мгновенно меняет цвет при щелчке. Другими словами, цвет будет меняться медленно, когда мышь входит или выходит из него, но резко, когда пользователь нажимает кнопку мыши или отпускает ее.

Проблема в том, что я не могу отделить их друг от друга. Вот что я пробовал:

<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;
      }
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
0
18
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не используйте одно и то же свойство, и вы можете это сделать. Используйте 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>

Другие вопросы по теме