Change button colours when selected

[clearspark]

How can I change a button’s colours (text and background), when a button is clicked? I want the user to be able to toggle the button between selected and non-selected.

The colours change on hover already. I just want to keep the hover colours when the button is clicked.

Thanks!

Here is the page in question:

https://emcfastpass.com/step-1/

[nabeel]

Hi @clearspark,

Thank you for reaching out to us. You can give your button a class e.g toggle-btn and then using JS we can change it’s text color and background color. After assigning a class toggle-btn to the button, add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$( ".toggle-btn" ).click(function(){
		$(this).toggleClass('toggle-state');
	});
});

If you don’t want the color to toggle on each click, then you can use this code instead:

jQuery(document).ready(function($){
	$( ".toggle-btn" ).click(function(){
		$(this).addClass('toggle-state');
	});
});

Finally you can add the following code in the Theme Options > CSS:

.toggle-state {
    background: transparent !important;
}

.toggle-state .x-anchor-text-primary {
    color: #000 !important;
}

Hope this helps!