how to transform button after hover again when muosedown and release-CodePudding

I've a button with transform: none; when I active that button the transform changed to transform: scale(0.9);. that's clear.
What I do? I want to change transform to 0 when hover out that button, but transform again when I hover again that button to 0.9.
Screen1: I don't want that one:

Screen2: I want that one:

My Code:

button{
  width: 180px;
  height: 80px;
  outline: none;
  border: none;
  font-size: 18px;
  color: white;
  cursor: pointer;
  font-weight: bold;
  transform: none;
  background-color: #3a3b3c;
}
button:active{
  transform: scale(0.9);
}

<button>Filters</button>

CodePudding user response：

Does this gonna make you happy?