Button :Focus colour same as :hover

  • Resolved harveyl12

    (@harveyl12)


    7 years, 2 months ago

    So i have some buttons on my services on the page of hcldesign.co.uk which is my website I am developing.

    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

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • I think you’re looking for the :active selector:

    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.

    • This reply was modified 7 years, 2 months ago by Jacob Peattie.
    Thread Starter harveyl12

    (@harveyl12)

    Hi,

    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

    Since each button is a different colour, yeah you’ll need to do it for each button. There’s no speed issue.

    Thread Starter harveyl12

    (@harveyl12)

    Okay thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Button :Focus colour same as :hover’ is closed to new replies.