'how to transform button after hover again when muosedown and release

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:
enter image description here

Screen2: I want that one:
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>
javascriptjquerycss


Solution 1:[1]

Does this gonna make you happy? ? <3 jQuery!

First we gonna check if the button is clicked or not. And if clicked, change the var so we know it's has changed.

var isclicked = false; $('button').click(function(e){ isclicked = true; });

Then the .mouseout function, because you want the change to only take place when the mouse leaves the button. If I understand your question correctly. And only when the button is clicked. Therefor that previous click check. Last, .addClass function so we can style to the desired behavior.

$('button').mouseout(function(e){ if(isclicked == true) { $('button').addClass('activated'); } });

&

button.activated:hover { transform: scale(0.9); }

Full code snippet: 

var isclicked = false;
$('button').click(function(e){
  isclicked = true;
});
$('button').mouseout(function(e){
  if(isclicked == true) {
    $('button').addClass('activated');
   }
});
button{
  width: 180px;
  height: 80px;
  outline: none;
  border: none;
  font-size: 18px;
  color: white;
  cursor: pointer;
  font-weight: bold;
  transform: none;
  transition:all 0.2s;
  background-color: #3a3b3c;
}
button:active{
  transform: scale(0.9);
}
button.activated:hover{
  transform: scale(0.9);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Filters</button>

Solution 2:[2]

So I created two functions for you, hopefully this works for you! In your button tag just add a mouseout and mousedown to call both functions.

function mouseFunction() {

document.getElementById('filters').style.transform = "scale(1)";

}
function mouse2Function() {

document.getElementById('filters').style.transform = "scale(0.9)";

}

<button onmouseout = "mouseFunction();" onmousedown = "mouse2Function();"id = "filters">Filters</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Infui0ayaan

Related Questions