Active class for button elements

[wowflak]

I am trying to add an active class to a button element. I have tried the following:
$el.x-anchor[class*=“active”] {
background-color: rgb(0,0,0);
}
and
$el.x-anchor:active {
background-color: rgb(0,0,0);
}

neither works

Link in private note. Thanks

[prakash_s]

Hello @wowflak,

Thanks for writing to us.

Please have a look at this thread for reference.

Active and Hover states for button v2 elements

Hey @wbgTHEMECO, Regretfully, the Button element doesn’t have Active State design options so you’ll need to write your own CSS. You can use the Hover and Active pseudo-classes in the Button’s Element CSS [image] $el.x-anchor:hover { background: red; } $el.x-anchor:active { background: blue; } Hope that helps.

Thanks

[wowflak]

Hmmm, that is exactly what I tried as referenced above…

[marc_a]

Hey @wowflak,

Are you referring to the filter buttons on your news page? If yes, I suspect that you have already figured it out because when I check it the filter buttons has already a hover state. If that is not the case, please let us know.

Thank you.

[wowflak]

No, I ended up using the menu option but had to break it into 2 smaller menus for mobile. Would still like to be able to apply an active class to a regular button

[tristup]

Hi @wowflak,

I have seen that it breaks into two lines on the smaller screen, but the active class is working as previously. If you find that it is not working, please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

If you want to apply the active class to a different button, you can go through the reference thread given by my colleague in his comment.

Thanks