New to the community? Start here

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.

Fri, 1 Jan 2016 17:46:28
  • Adam
    • Support Gorilla

    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
    • WPMU DEV Initiate

    Adam –

    Thanks for the amazingly prompt reply. Unfortunately, as timing would have it, my site (hosted by WP Engine) is presently one of many victims of a DDOS attacks going on at the moment. As soon as they’ve been able to mitigate the issue I’ll provide the requested items! Hopefully soon..

  • Adam
    • Support Gorilla

    Hello Travis!

    That’s most unfortunate, I’m really sorry it happened to your site! I hope WP Engine team will soon deal with this and you site’ll be back up and running again.

    Let me know please once you’re ready to proceed and I’ll be glad to assist you with this!

    Best regards,

    Adam

  • Travis Hanson
    • WPMU DEV Initiate

    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.

    [attachments are only viewable by logged-in members]

  • Adam
    • Support Gorilla

    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