'Button click toggle on mouse release

I am trying to get the same effect as the example below, whereby you click a button the button background changes to red but on release it changes back to the default background color check example below and click the C OR = button to see the effect.

Example source

const demoBtn = document.getElementById("demo");
demoBtn.classList = "demo";

function myDemo() {
  switch(event.type) {
    case "mousedown":
      demoBtn.style.cssText = "background: #F00; color: #fff;";
        break;
    case "mouseup":
      demo.style.cssText = "background: #DCADB0; color: #F00";
  }
}
demoBtn.addEventListener("mousedown", myDemo);
demoBtn.addEventListener("mouseup", myDemo);
:root {
  --color: #F00;
  --background: #DCADB0;
}
.demo {
  color: var(--color);
  background: var(--background);
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta https-equiv='X-UA-Compatible' content='IE-EDGE'>
    <meta name="viewport" content="width=device-width">
    <title>Home</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  
    <button id="demo">Click</button>
    
    <script src='script.js'></script>
  </body>
</html>
buttonaddeventlistener


Sources

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

Source: Stack Overflow

Solution Source

Related Questions