Advanced Hover Effects on Buttons and Elements

February 17, 2021

Oxygen Builder allows you to do some hover effects on buttons and other elements. I came across this site:

Hover.css - A collection of CSS3 powered hover effects (ianlunn.github.io)

and liked the border transition effects. I want to apply the 'underline from center' effect on my buttons. Here's how I did it with Oxygen Builder:

  • Download the hover.css file from here
  • Add this as a completely new stylesheet into Oxygen, or if you only want one or two effects, find the effects code you want and copy and paste into a custom stylesheet.
    • The code needed is commented with the name of the effect. Copy and paste until the next comment e.g.:
  • I add this into a stylesheet I call 'CustomCode'
  • Now on each button, I add in the class of 'hvr-underline-from-center' and the hover effect applies:
  • You can try out the effect with the button below. Of course, if you don't like the colours, sizes etc. you can modify these in the code you entered into the stylesheet:
  • As you can see by hovering over this text, the effect can apply to many different elements, not just buttons
crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram