Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 4, 2015 at 2:41 pm #482706
    maschera

    Hi guys,

    I’ve set the buttons to be of a specific color. Now when I over on top they kind of light up.

    However I’d like the color code to change when hovering. E.g. colors for button and text are now Purple/White. I’d like when someone hovers them to become White/Purple.

    How can I achieve this?

    Many thanks in advance

    August 5, 2015 at 8:07 am #483116
    Rikard

    Hey maschera,

    Please try the following in Quick CSS under Enfold–>General Styling:

    .avia-button:hover {
    background-color: #ffffff !important;
    color: #e800dc !important;
}

    Thanks,
    Rikard

    August 5, 2015 at 11:06 am #483208
    maschera

    Hi Rikard,

    Thanks for the tip – It partially worked.

    The only two issues are that 1. I lose the button frame and 2. I’d have like a nice fade-in fade-out effect when hovering (similar to the one when you hover on a team member photo), rather than a net light on/light off as it is now.

    August 5, 2015 at 11:23 am #483215
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .avia-button {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border: none!important;
}

    Cheers!
    Yigit

    August 5, 2015 at 12:45 pm #483268
    maschera

    Hi Yigit,

    It worked great for the homepage button. However I’d like the buttons in the Fullwidth Sub Menu and Contact page to have the same effect.

    Should I add some other code?

    August 6, 2015 at 5:59 am #483680
    Ismael

    Hi!

    Use this for the full width submenu button:

    #top .av-menu-button-colored:hover > a .avia-menu-text {
    background-color: blue !important;
    color: #ffffff;
    webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    The contact form button should have the same effect by default.

    Best regards,
    Ismael

    August 6, 2015 at 12:59 pm #483826
    maschera

    Almost there Ismael.

    It worked but when hovering there is a frame line (see the link attached please)

    August 6, 2015 at 8:20 pm #484139
    Andy

    Hi!

    use this code:

    #top .av-menu-button-colored > a .avia-menu-text {
border-bottom: 0px solid;
}

    Best regards,
    Andy

    August 7, 2015 at 12:19 pm #484490
    maschera

    Super!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Buttons hovering color effect?’ is closed to new replies.