Archived topic

navigationbutton with hover

5 replies · Started by erik on November 20, 2019

Viewing posts 1–6 of 6

November 20, 2019 at 7:20 am #1068600

Hello generatepress,

i added a call to action button in my navigation menu, i added the css to my site and everything works fine but now i want a hover effect on this button, can you tell me how i can do this with css?

kind regards, Erik

November 20, 2019 at 9:01 am #1068708

Hi there,

try this CSS:

.main-navigation .main-nav ul li.nav-button a {
    box-shadow: 0px 5px 7px -2px rgba(0,0,0,0);
    transition: all 0.2s ease-in;
}

.main-navigation .main-nav ul li.nav-button:hover a {
    box-shadow: 0px 5px 7px -2px rgba(0,0,0,0.75);
    transform: translateY(-3px); 
}

November 21, 2019 at 6:58 am #1070749

Hi David,

thanks for your help,
what i mean is how to change the color of the button on hover,
and also how to change the color of the text on hover of the button.
by the way the css you gave works pretty fine.

kind regards, Erik

November 21, 2019 at 7:05 am #1070781

Try this instead:

.main-navigation .main-nav ul li.nav-button a {
    transition: all 0.2s ease-in;
}

.main-navigation .main-nav ul li.nav-button:hover a {
    background-color: #ff0000;
    color: #000;
}

November 22, 2019 at 4:29 am #1072202

Hello David,

this works very well!
thanks for your support..

kind regards, Erik

November 22, 2019 at 6:10 am #1072330

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.