Different transition for active and release button-CodePudding

I want to make different color transitions when someone clicks the button and releases again.

As you can see below, when you click the button, the color is instant but when you release it, it's not instant. How can I do this?

.submitBtn {
    position: absolute;
    display: block;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 225px;
    height: 40px;
    border: 3px solid #1c215e;
    border-radius: 5px;
    color: #9fa6fc;
    background-color: #1c215e;
    font-size: 16px;
    margin-top: 150px;
    transition: color 1s, background-color 1s;
}

.submitBtn:hover {
    color: black;
    background-color: #4a53c2;
}

.submitBtn:active {
    color: #3e46a8;
    border-color: #3e46a8;
    transition: 0s;
}

<button  type="submit">Login</button>

CodePudding user response：

Here is a trick using text-shadow that will replace the main color on hover and default state and for the active you use color with no transition:

.submitBtn {
  display: block;
  margin: auto;
  border-radius: 5px;
  font-size: 20px;
  padding: 10px 50px;
  
  border: 3px solid #1c215e;
  color: #0000;
  text-shadow: 0 0 #9fa6fc;
  background-color: #1c215e;
  cursor: pointer;
  transition: text-shadow 1s, background-color 1s;
}

.submitBtn:hover {
  background-color: #4a53c2;
  text-shadow: 0 0 black;
}

.submitBtn:active {
  color: red;
  border-color: #3e46a8;
}

<button  type="submit">Login</button>

CodePudding user response：

You must use javascript.

must toggle classlist with js document.getElementById('btn').addEventListener('click',function(e) { e.target.classList.toggle('active') })

.submitBtn {
    display: block;
    margin: auto;
    border-radius: 5px;
    font-size: 20px;
    padding: 10px 50px;
    
    border: 3px solid #1c215e;
    color: #0000;
    text-shadow: 0 0 #9fa6fc;
    background-color: #1c215e;
    cursor: pointer;
    transition: text-shadow 0.3s, background-color 1s;
  }
  
  .submitBtn:hover {
    background-color: #4a53c2;
    text-shadow: 0 0 black;
  }
  
  .active {
    color: red;
    border-color: #3e46a8;
    background-color: #4a53c2;
    text-shadow: 0 0 black;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Magical Lamp Website</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <button id="btn"  type="submit">Login</button>
  <script>
document.getElementById('btn').addEventListener('click',function(e) {
  e.target.classList.toggle('active')
})
</script>
</body>

</html>