Creating An Animated Icon Button In WordPress With Oxygen

In this video, Jonathan shows you how create an animated icon button in WordPress using Oxygen.
Check out Jonathan's channel Permaslug ➜ bit.ly/2AS3cHR
Get Oxygen ➜ oxygenbuilder....
Subscribe ➜ oxygenbuilder....
JOIN THE OXYGEN FACEBOOK GROUP FOR HELP & SECRET INFO ➜ oxygenbuilder....

[@TheCredibleHulk]

5:08 It's much better to set the Overflow to "hidden" (under Advanced > Layout) instead of adding a separate border radius to a child element. That would make all corners rounded & you can control the border radius from one place (instead of having to manage border radiuses of children too).

[@FernandoArbex]

Fantastic. Thanks a lot.
Really love to see these small videos that solves a specific issue.

[@CrisClaessens]

Aha, finally! Was looking for this, thank you.

[@TheCredibleHulk]

7:54 Can't you create a custom CSS selector (under Manage > Selectors) instead of using a custom stylesheet? That way you can create this hover effect (and more) using Oxygen's UI, which would automaitcally add browser prefixes for CSS, when necessary. I've been using custom Selectors a lot lately and it's really handy.

[@noureddinehamaidi5306]

Both your notes came to my mind while I was watching and you saved me the comment thanks man.

[@emanymstahw]

@@noureddinehamaidi5306 both his comments and you making that comment came to mind. So thanks you saving me that comment.

[@kokapeli]

Awesome video guys!

[@racingheartentertainment1835]

Excellent video!

[@slava-slavik]

Several good ideas in this tutorial. Thank you for it.

[@korbinperry6906]

This is brilliant thank you for sharing!

[@jeffkhankah7077]

I love this video, thanks so much for this informative video.. ⭐️⭐️⭐️⭐️⭐️

[@benoit_is_here]

Great Tuto. Any option if I want deactivate this animation on mobile screen?

[@baguswidyanto7006]

can we change the icon when hover?

[@herbalplantsinformation1662]

the whole button flips in my end... weird...

[@DudeWithADrone]

This its great and works in the editor but when I go out of the editor or simply click the frontend button and try hovering over the button I get the colour change but the icon no longer spins. I tried clearing the Oxygen cache and reloading the page but that made no difference. Any tips anyone? Thanks inn advance.

[@simonepagnini6735]

The same to me... CSS is ok, but nothing happens...

[@davekirkpatrick4039]

If you're new to Oxgyen, save yourself a huge amount of time and frustration - do not, DO NOT, follow this strategy of haphazardly adding values to ID's. Take the time beforehand, maybe using a text editor or even paper, and draw out your sections, divs, etc. and assign classes to each.
Oxygen's selector panel is a nightmare that will get worse when you later realize everything could have been easier if you took a moment assigning memorable class names to reusable selectors. For instance, you might create col-25, col-30, col-50, col-75, etc. and assign width percentages to each then these selectors can be reused on almost every element thereafter. I get that this video is about something else, but these guys are not gonna teach you CSS best practices - do it like this video assigning values to ID's is not good.

[@UnaNeary]

is there a tutorial to explain this in more detail? I am new to Ogygen and want to start, as I mean to go on. i want to build up reusable buttons like the ones he showed in the video, then just quickly add them without having to create them each time.

[@garthy4u]

@@UnaNeary Oxygen has reusable elements built in. More to @Dave Kirkpatrick's point, it's probably cleaner to use utility classes. I'm starting to use Oxymonster Framework right now and it's very powerful for keeping elements consistent throughout a site. It's based on Tailwind CSS framework. Go check it out.