Archived topic

Buttons - Hover Effect

5 replies · Started by Janine on February 21, 2021

Viewing posts 1–6 of 6

February 21, 2021 at 7:27 am #1666630

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.

February 21, 2021 at 12:37 pm #1666895

Hi there,

Try this CSS:

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

Let me know if this helps :)

February 21, 2021 at 12:44 pm #1666903

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.

February 21, 2021 at 12:46 pm #1666909

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 :)

February 21, 2021 at 12:51 pm #1666925

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.

February 21, 2021 at 1:13 pm #1666949

No problem :)

This archived topic is closed to new replies.