How To Change Color Of Button In Active State Using Inline Css?

Is there any way to change the background color and/or border color of a button when it is in active state (i.e. Clicked) using inline css? Something like this but for when the bu

Solution 1:

Considering that css :active is just a css pseudo-class and not a Dom property or attribute you can't have an inline equivalent for that.

But, if in your case, the click event could be a valid alternative, you can do something like that...

<script>functiontoggleBg(element, color) {
    if(!color) {
      color = element.dataset.normalColor;
    } else {
      element.dataset.normalColor = element.style.backgroundColor;
    }

    element.style.backgroundColor = color;
  }
</script><buttononmousedown="toggleBg(this,'red')"onmouseup="toggleBg(this)">RED ON PRESS</button>

Just a note, inline-styling or inline-javascript isn't a good practice, if you can, use css:

<style>button:active { background: red; }
</style><button>RED WHEN ACTIVE</button>

Solution 2:

You can't change the background color and/or border color of a button when it is in active state (i.e. Clicked) using inline css, You can use :active in calss to change baground color or border color