:hover overrides :active styles - CSS

Question

Here is a simple buy button:

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;

  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;

}

.btn:active {
  transform: translateY(5px);
  box-shadow: none;
}

.btn:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}

<div class="submit-container">
  <div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
  </div>
  <input class="btn submit" id="submit-pay" type="submit" value="BUY" />
</div>

Note that there is no movement (transform and box-shadow change) when we click on the button, right?

If I remove the hover style I get those desired movements:

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;

  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;

}

.btn:active {
  transform: translateY(5px);
  box-shadow: none;
}

.btn:not(.disabled):hover {
  
}

<div class="submit-container">
  <div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
  </div>
  <input class="btn submit" id="submit-pay" type="submit" value="BUY" />
</div>

How can I have both active and hover animations on the button?

Answer 1

You can use !important to override other styles:

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;

  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;

}

.btn:active {
  transform: translateY(5px) !important;
  box-shadow: none !important;
}

.btn:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}

<div class="submit-container">
  <div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
  </div>
  <input class="btn submit" id="submit-pay" type="submit" value="BUY" />
</div>

If you don't want to use !important, you can try:

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;

  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;

}


.btn:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}

.btn:active {
  transform: translateY(5px);
  box-shadow: none;
}

<div class="submit-container">
  <div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
  </div>
  <input class="btn submit" id="submit-pay" type="submit" value="BUY" />
</div>

Answer 2

:hover applies when the mouse is pointing to the element.

:active applies when the mouse button is being clicked (so :hover is a prerequisite).

You can't make it :active without it also being :hovered. (That simplifies somewhat as you can activate with the keyboard).

---

See the spec on The Cascade.

Sort rules with the same importance and origin by specificity of selector

Your rules have equal specificity and importance.

Finally, sort by order specified

You specified :hover after :active so the :hover rules override the :active rules.

Define them the other way around so that the :active rules override the :hover rules.