[Support request] navigationbutton with hover

[erik]

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

[David]

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); 
}

[erik]

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

[David]

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;
}

[erik]

Hello David,

this works very well!
thanks for your support..

kind regards, Erik

[David]

Glad to be of help

[Author]

Posts