I have these buttons changing colour on hover by using elementor page builder. I am wanting for all buttons on my site to be able to apply the hover colour when the button is clicked.

I have made this possible per button by using the below code but as you can see i would have to find every button and change the button reference. Not ideal and will be a lot of CSS in my additional CSS field.

.elementor-130 .elementor-element.elementor-element-043fopq a.elementor-button:focus, .elementor-130 .elementor-element.elementor-element-043fopq .elementor-button:focus {
    color: #ffffff;
    background-color: #c335eb;
    border-color: #c335eb;
}

So does anyone know anyway in which I can use CSS to apply the :hover colour when a button is clicked such as :focus? So when a button is clicked it just keeps the :hover effect active?

Thanks,

Harvey

https://developer.mozilla.org/en-US/docs/Web/CSS/:active

So does anyone know anyway in which I can use CSS to apply the :hover colour when a button is clicked such as :focus?

You need to provide the same styles for both :hover and :focus (or :active etc.), as you have done, to have them appear the same. There’s no way to say that all :focuss should be the same as the :hover with vanilla CSS.

SO are we saying that I need to add CSS for each individual button here and this is the only way? So to literally use the code i pasted but change the buttons handle until I have set this for all buttons i need to change?

Would this cause any speed issue here?

Thanks,

Harvey