Изменение кнопки на 5 сек после нажатия с последующим возвращением к начальному состоянию

Question

задача: при наведении на кнопку рядом с текстом появляется иконка, сама кнопка подсвечивается желтым цветом при нажатии на кнопку на 5 сек изменяется ее фон, цвет текста и сам текст с последующим возвращением к начальному состоянию

решение: цвета пытался реализовать с использованием transition CSS, но проблема в том, что правильно работает только наведение или нажатие, но не то и другое (при наведении мне не нужно, чтобы кнопка оставалась подсвеченной на протяжении 5 сек)

button {
  content: "Click Me";
  background-color: white;
  color: black;
  transition: all 0s linear 5s;
  width: 100px;
  height: 20px;
}
button:hover:not(:active) {
  background-color: yellow;
}
button:hover:after {
  content: "\f111";
}
button:hover:active {
  color: white;
  background-color: black;
  transition-delay: 0s;
  content: "Clicked";
}

песочница: запустить код

вопросы: всякую задачу можно решить по-разному, как подобное можно реализовать без изобретения велосипеда? изменение текста кнопки можно сделать только через JS (setTimeout) или есть варианты использования чисто CSS?

Answer 1

Вот почти все что можно сделать на css. Есть куча ограничений, поэтому не выдумывайте и делайте на js

button {
  content: "Click Me";
  background-color: white;
  color: black;
  width: 100px;
  height: 20px;
}

button:focus {
  animation: bg 5s steps(1, end) 1;
}

button:hover:after {
  content: "\f111";
}

@keyframes bg {
  from {
    background-color: yellow;
  }
  to {
    background-color: white;
  }
}

<button>TEXT</button>

БЛОГ НА HUSL

Изменение кнопки на 5 сек после нажатия с последующим возвращением к начальному состоянию

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