Layout blog button css problem

Hi there,

I’m having troubles with the WordPress button CSS, somehow it is always on :hover CSS…

How do I set it up only to show :hover CSS when the mouse is placed on the button?

Please watch: https://youtu.be/Iv_FL3fJJS0

Hello Katarina,

Thanks for writing in!

This is your custom CSS code:

.wp-block-button__link, .wp-element-button:hover {
  background: #2970ff !important;
  transition: var(--fast-transition)!important;
}

If you inspect your Button, it has wp-block-button__link and wp-element-button class attached to it.

Your CSS code should only be:

.wp-block-button__link:hover,
.wp-element-button:hover {
  background: #2970ff !important;
  transition: var(--fast-transition)!important;
}

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

The code above serves as an example code. Feel free to modify it when needed. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

1 Like

Thank you so much! That works for me

I appreciate your help :heart:

Hi Katarina,

Glad that we are able to help you.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.