Docs

[WoodWatchCo]

I have placed blue bordered “VIEW MORE” buttons on my homepage. How can I make a hover effect that changes the blue border and text to black when hovered over? Only those VIEW MORE buttons. NOT all the buttons on my page.

[WoodWatchCo]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To resolve this issue, please follow these steps:
1] Please edit your page in Cornerstone
2] Click on the button element.
3] Add a custom view-more class in the class field (http://prntscr.com/btuhtb)
4] Insert the following custom css in the settings tab, Settings > Custom CSS

.x-btn.view-more {
  color: black; 
  border-color:#000ae3;
}

.x-btn.view-more:hover {
  color: #000 !important;
  border-color: #000 !important;
}

You need to remove the inline css you have added because it is no longer necessary. And by the way, there is no hover-background color and hover-color.

Hope this helps.

[WoodWatchCo]

This worked perfectly. Thanks!

[Rue Nel]

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts