Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 3, 2017 at 4:54 am #815718
    EnlightenedMedia

    How do I add a hover effect to a button within the LayerSlider? I have tried applying a unique class (ex: “custombuttonclass”) to the button layer (inside Link & Attributes panel) then declaring the hover state of the element in the Quick CSS field. Eg:

    .custombuttonclass:hover {
    background-color: blue;
    color: orange;
    }

    But this is not working. I have attempted multiple css tricks but nothing has worked. Please help, this should be a simple thing to achieve.

    July 3, 2017 at 11:19 am #815788
    Sarah

    Hey EnlightenedMedia,

    Please try using the !important rule.

    .custombuttonclass:hover {
background-color: blue !important;
color: orange !important;
}

    Let us know if that works for you!

    Best regards,
    Sarah

    July 4, 2017 at 12:17 pm #816278
    EnlightenedMedia

    Hi Sarah, I tried that but still nothing changes.

    July 4, 2017 at 12:21 pm #816285
    EnlightenedMedia

    I found a solution within Layer Slider, so I don’t need to define a custom class.

    This is what I did:

    With the button layer selected, go to the Transitions tab and enable Hover. Within hover settings, set colors in the Style Properties box. In the Timing & Transitions box, alter the duration to 100 ms. And that’s it, now I have a hover effect on my button!

    July 4, 2017 at 4:08 pm #816385
    Sarah

    Great, and thank you for sharing!

    Please let us know here in the forums if you need help with anything else.

    Cheers!
    Sarah

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘How to add Hover color effect color to button in LayerSlider?’ is closed to new replies.