Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 12, 2016 at 2:05 am #563593
    bobfurgo

    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.

    January 12, 2016 at 2:15 am #563595
    Elliott

    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

    January 12, 2016 at 4:35 am #563658
    bobfurgo

    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.

    January 13, 2016 at 4:16 am #564308
    Elliott

    Hi!

    Do this for hover.

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

    Regards,
    Elliott

    January 13, 2016 at 9:10 pm #565028
    bobfurgo

    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, 10 months ago by bobfurgo.
    January 14, 2016 at 5:11 am #565203
    Rikard

    Hi,

    Please try the following CSS as well:

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

    Thanks,
    Rikard

    January 14, 2016 at 5:25 am #565209
    bobfurgo

    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?

    January 14, 2016 at 2:19 pm #565396
    Rikard

    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

    January 14, 2016 at 8:38 pm #565761
    bobfurgo

    Hello,

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

    January 15, 2016 at 2:18 am #565837
    Yigit

    Hi!

    Please add following code to Quick CSS 

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

    Best regards,
    Yigit

    January 15, 2016 at 2:25 am #565843
    bobfurgo

    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.

    January 15, 2016 at 2:27 am #565846
    Yigit

    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

    January 15, 2016 at 4:29 am #565912
    bobfurgo

    ah perfect! Thank you Yigit!

    January 15, 2016 at 9:16 am #566002
    Vinay

    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

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