Not necessarily a WP specific question, but hoping for some

Not necessarily a WP specific question, but hoping for some guidance. I've got plenty of nice looking button embedded in my LayerSlider banners on my website, but would love to add a hover effect on mouseover. Anyone know of an easy way to accomplish this?

Probably CSS or JS or something of the sort, but I've not got skills in those areas and so I'll need a bit of hand-holding to make it happen. Thanks in advance.

  • Adam Czajczyk

    Hello Travis,

    I hope you're well today and thank you for your question!

    I think this should be doable with some custom CSS rules. Could you please point me to the site of yours, also indicating the buttons you'd like to target and giving some description on what would that "onhover" effect be? I'll be happy to take a look and see what I can suggest here :slight_smile:

    Best regards,
    Adam

  • Travis Hanson

    Alright...site back up and running! I've attached a screenshot with one of the buttons circled. The red button circled in the LayerSlider could turn to a deeper red on hover, or could even invert completely (that is, from red button with white text to a white button with red text). The button I've circled is of what I would call a "medium" size and has rounded corners...but rounded corners aren't really a must. I imagine that once the necessary CSS has been created I'll be able to customize to fit my needs on other slides.

    Just appreciate your willingness to give me a push in the right direction! If necessary, I could also set up a temporary guest account in my staging environment and let you create from there.

  • Adam Czajczyk

    Hello Travis,

    I hope you're having a nice day!

    The change should be a matter of adding some CSS rules to your site's CSS style file. Unfortunately, I'm still not able to load your site with a "Connection Timeout" error. I'll give you then some general tips on this and hopefully you'll be able to adopt these on your own. However, I'll be glad to give a ready to go solution but first I'd really need to visit the site :slight_smile:

    The general rule is that you first need to identify an ID or a class name for button. This can be done e.g. with Chrome Dev Tools as described here:

    https://developer.chrome.com/devtools/docs/dom-and-styles

    Assuming that the button element ID is "mybutton", here's an example for "on hover" style that adds simple smooth transition and changes button color and text color for the button:

    #mybutton {
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    }
    #mybutton:hover {
    background:#00FF00;
    color:#0000FF;
    }

    You'd want to replace the "#mybutton" ID with a real ID of the button on your site and also adjust "background" and "color" values as I used just plain green and plain blue here.

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.