Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 8, 2015 at 11:54 pm #456385
    djshortkut

    I have a fullscreen slider on this page. I want to change the hover effect on the buttons for this particular slideshow to work like the rest of the buttons on my site. Right now upon hover, my buttons will have a background color of #2c5b9c and the text will be #ffffff I want the buttons on this slideshow to work the same way. I created a custom css class for this slider of button-hover to target only this slider. Can you please provide me with some quick css to accomplish this? Thanks!

    June 9, 2015 at 5:38 pm #456822
    Elliott

    Hey djshortkut!

    You can target that like so.

    #av_section_1 .avia-button:hover { background: #2c5b9c !important; color: white !important; }

    If you only want it done on that page then drag a codeblock element to the page content and add this inside.

    <style type = "text/css">
your css code goes here
</style>

    Cheers!
    Elliott

    June 9, 2015 at 6:06 pm #456834
    djshortkut

    Thanks! I tried inserting this code to the page in a code block but it didn’t do anything. I also tried using the code in quick css and it didn’t work.

    June 10, 2015 at 4:26 pm #457326
    Elliott

    Hi!

    Your talking about the button in the “We bring your vision to life” section correct? Send us a WordPress login and we’ll take a closer look.

    Regards,
    Elliott

    June 10, 2015 at 4:59 pm #457364
    djshortkut

    No, not that section. That button already works the way I want it to on hover. It’s the fullscreen slider below it that I’m talking about right under the section “Beautiful Results for Amazing Clients”

    June 11, 2015 at 5:25 pm #457928
    Elliott

    Hey!

    Try this then.

    .avia-slideshow .avia-button:hover { background: #2c5b9c !important; color: white !important; }

    Best regards,
    Elliott

    June 11, 2015 at 7:26 pm #457991
    djshortkut
    This reply has been marked as private.
    June 12, 2015 at 6:11 pm #458530
    Elliott

    Hi!

    Change it to this then.

    .avia-slideshow .avia-button:hover { background: blue !important; border-color: blue !important; opacity: 1 !important; color: white !important; }

    Cheers!
    Elliott

    June 12, 2015 at 6:26 pm #458538
    djshortkut
    This reply has been marked as private.
    June 13, 2015 at 2:49 pm #458767
    Ismael

    Hi!

    You can use this:

    a.avia-slideshow-button.avia-button.avia-color-theme-color.avia-multi-slideshow-button:hover {
  color: #fff;
  border: 3px solid #fff !important;
  background: rgba(0,0,0,0.2) !important;
}

    Regards,
    Ismael

    June 13, 2015 at 5:10 pm #458794
    djshortkut

    Thanks Ismael! You can close this thread.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Fullscreen Slider Button Hover’ is closed to new replies.