Effect :Superimposing Focus :active

Question

It is possible to visualize the effect of :active even though :focus? I’m trying here but when I click on the element the effect of :active is not shown jumping straight to :focus.

.btn{
  color: black;
  background-color: #FFFFFF;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  border-color: #CCC;
  outline: none;
}
.btn:active{
  color: #333;
  background-color: red;
}
.btn:focus{
  color: #333;
  background-color: #e6e6e6;
}

<button class="btn">button</button>

Answer 1

Change the order in the CSS. Put :focus before the :active.

.btn:focus{
  color: #333;
  background-color: #e6e6e6;
}
.btn:active{
  color: #333;
  background-color: red;
}

Why before?

CSS works top to bottom. When you declare a style before for one element and another after, what comes next will overwrite what was declared before. When you click on the button, it will have both pseudo-classes: :active and :focus, soon, whatever comes after will take priority in the effect on the element. By changing the order, while you are clicking on the button, it will have the effect of the :active above the :focus, and when you drop the click, it will only be with :focus. When you click off the button, it will lose the :focus and return to normal.

Behold:

.btn{
  color: black;
  background-color: #FFFFFF;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  border-color: #CCC;
  outline: none;
}
.btn:focus{
  color: #333;
  background-color: #e6e6e6;
}
.btn:active{
  color: #333;
  background-color: red;
}

<button class="btn">button</button>