How to Create a Mouse Over Button Hover Effect, for BG Colour Selected from CMS Collection List

This is an awesome community - you already knew that but it cannot be said enough - and I wanted to pay it forward and maybe help those - noobs like myself (that’s a double “o”!) - who may have been having similar issues relating to this subject and scratching their heads…

It’s obviously very simple to create a mouse over button hover effect.
However, if you’ve created a collection list and added say a “buy” button - within an e-commerce collection list for example - AND chosen the BG colour for the button from a collection item within the collection list, then it’s no longer possible to set a hover effect from the Style panel like you normally would…

What to do?

  1. Create a “button-wrapper” DIV and set position to “Relative”.

  2. Put buy button(s) inside “button-wrapper” DIV (make sure you’ve already styled and given a class to the button beforehand, like “buy-button”)

  3. Add a Text Link inside the “button-wrapper” DIV and give it the same class as the buy button… then add a combo-class, say, “button-hover-effect”.

  4. Duplicate the Text Link text to match that of the buy button. And URL etc…

  5. Set the position of the Text Link to “Absolute” with a z-index higher than the buy button and position it over the buy button.

  6. Create the hover effect / transition eases etc for the Text Link element.

I hope this can help someone.


1 Like

@Ozalcin Good post keep it up, thanks for sharing.

1 Like