Change Button Styling After Clicked

I'm wanting a button to change it's appearance AFTER it's been clicked on and have it stay that way. I've tried css using 'button:focus' and it'll work, but as soon as another butt

Solution 1:

You need to understand focus is a stage. Whenever the element loses focus it will change back to old style. And what you want to achieve is triggered by a 'click' event. Using JS is the best way to handle it.

document.getElementById('p1Button').addEventListener('click', onClick);
document.getElementById('p2Button').addEventListener('click', onClick);

functiononClick(){
    this.className += ' YourClassHere';
}

Also I recommand you using jQuery which should be more convenient.

Solution 2:

The best way to do this seems to be by using JavaScript. And easier way will be to use jQuery.

In a js file, put the following code to do it with jQuery

$("#p1Button").click(function(){
    $(this).addClass("yourClassName");
});

If you don't want to use jQuery, then use the code as follows and in HTML, give a reference to that function like <button onclick="clickedOnButton(this)" id=p1Button><span>Player One, please select me! </span></button>

functionclickedOnButton(this)
{
    this.className+='yourClassName';
}

Add a class in the css file too

.yourClassName
{
   /* Style to use when clicked on button. */
}