применение перехода css к кнопке после нажатия (активно: свойство)

Question

У меня есть кнопка, где после нажатия я даю ей тень от тени, просто скажите в активном свойстве, как

.thankyou_button_active {
  background-color: #ff9d72;
  color: white;
  border: 1px solid #ff9d72;
  width: 120px;
  outline: none;
  height: 31px;
  font-weight: 700;
  border-radius: 30px;
  transition: transform  1s all;
  font-size: 15px;
  padding: 6px 10px;
  margin-bottom: 1rem;
}

.thankyou_button_active:active {
  transition: transform  1s all;
  box-shadow:0 0 10px #ff9d72;
}

, поэтому в свойстве 'active' я пытался применить свойство transition, но это не так. работать ... работает ли переход в

класс: активный

работает по-другому ??

Answer 1

transition: transform 1s all не является кратким значением git, для получения дополнительной информации см. переход .

Вам необходимо указать transition в основном классе (в данном случае, .thankyou_button_active) и поместите измененные свойства в класс селектора свойств: .thankyou_button_active:active. Если вы не хотите устанавливать продолжительность отдельно, проверьте это, например:

.thankyou_button_active {
  background-color: #ff9d72;
  color: white;
  border: 1px solid #ff9d72;
  width: 120px;
  outline: none;
  height: 31px;
  font-weight: 700;
  border-radius: 30px;
  transition: box-shadow 1s;
  font-size: 15px;
  padding: 6px 10px;
  margin-bottom: 1rem;
  box-shadow:0 0 0px #ff9d72;
}

.thankyou_button_active:active {
  box-shadow:0 0 10px #ff9d72;
  transition-duration: 0.05s;
}

<button class="thankyou_button_active">Thank You</button>