[Support request] navigationbutton with hover

Home Forums Support navigationbutton with hover

  • This topic has 5 replies, 2 voices, and was last updated 10 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1068600
    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

    #1068708
    David
    Staff
    Customer Support

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

    #1070781
    David
    Staff
    Customer Support

    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;
    }
    #1072202
    erik

    Hello David,

    this works very well!
    thanks for your support..

    kind regards, Erik

    #1072330
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.