Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #563593

    Hi guys! I’ve been trying to set the hover color for this button to a black bg. I’ve used the following quick css

    .readmore:hover button {
    background: #000000;
    }

    The custom CSS class i’ve used is readmore. What have I done wrong here?

    Also, can I please get some help with setting custom hover colors to the buttons within the fullwidth easy slider? I’d like both buttons to have a hover of white bg with black text.

    I tried figuring it out on my own with no luck. Sorry for the inconvenience with such a rudimentary request.

    #563595

    Hey digitalammo!

    You should be able to do that in the button settings but if you want to use CSS then try adding this inside a codeblock element in the page.

    <style type = "text/css">
    #av_section_1 .avia-button {
        background: black !important;
    }
    </style>

    Regards,
    Elliott

    #563658

    Hello. I thought it was in the settings but I tried to set the “Highlight Color – secondary color for link and button hover, etc” to black in general settings but still no black hover.

    I just added the CSS above in a text block element, but it makes the button appear black instead of a black hover.

    #564308

    Hi!

    Do this for hover.

    <style type = "text/css">
    #av_section_1 .avia-button:hover {
        background: black !important;
    }
    </style>

    Regards,
    Elliott

    #565028

    Thank you elliott! that works great.

    Could I please get some help with setting custom hover colors to the buttons within the fullwidth easy slider on the homepage? I’d like both buttons to have a hover of white bg with black text.

    Thank you guys again for such outstanding support. I really do appreciate it.

    • This reply was modified 8 years, 11 months ago by bobfurgo.
    #565203

    Hi,

    Please try the following CSS as well:

    .avia-button:hover {
        background-color: white !important;
        color: black !important;
    }

    Thanks,
    Rikard

    #565209

    Works great, but it looks like that CSS hover is being applied to all buttons throughout the site. Is there a way to target it to only affect the slideshow buttons?

    #565396

    Hi,

    Like for your problems with hiding and showing sliders, you can simply inspect the page and find the ID of slider and put it before the class:

    #fullscreen_slider_0 .avia-button:hover {
        background-color: white !important;
        color: black !important;
    }
    

    Best regards,
    Rikard

    #565761

    Hello,

    I actually did try this exact code but it doesn’t seem to work when entering it into the quick css field.

    #565837

    Hi!

    Please add following code to Quick CSS

    #full_slider_2 .avia-button:hover {
        background: white!important;
        color: black!important;
    }

    Best regards,
    Yigit

    #565843

    Works great! Sorry to be picky but when the white appears when hovering on the buttons there is also a 1px dark blue line at the bottom. Is there a way to get rid of this? If not that’s ok.

    #565846

    Hey!

    Please change the code to following one

    #full_slider_2 .avia-button:hover {
        background: white!important;
        color: black!important; 
        border: none !important;
    }

    Cheers!
    Yigit

    #565912

    ah perfect! Thank you Yigit!

    #566002

    Hi!

    Glad we could help! please feel free to let us know if you have any questions related to Enfold.

    Thank you for using Enfold.

    Regards,
    Vinay

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘creating button hover color with css class’ is closed to new replies.