[Resolved] Buttons – Hover Effect

[Janine]

Hello.

Two questions about buttons and hover effects:

1. How can I add a hover effect to the button in my primary navigation?

I would like it to fill in on hover.

2. And how can I make the border of a ghost button disappear on hover?

See the Subscribe Now! button in the hero section on my homepage and then further down the page in a CTA section.

Thank you.

[Leo]

Hi there,

Try this CSS:

.main-navigation ul li.menu-button a:hover {
    background-color: #000000;
    border: none;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Janine]

Thank you, Leo.

My button in my main navigation looks good.

Now, how can I remove the border from ghost buttons created with the Button block on hover.

Thank you.

[Leo]

I would recommend using the buttons block from GenerateBlocks to allow far more control than the buttons block from WordPress:
https://docs.generateblocks.com/article/buttons-overview/

You won’t need to remove the border, just make sure the border color is the same as the button hover background color 🙂

[Janine]

Thanks, Leo.

I am doing just that as we speak. But your tip just cleared up the question I had about the border using GB.

Thanks.

[Leo]

No problem 🙂

[Author]

Posts