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

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

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

<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;
      }
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
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>

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