Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
Posted on April 12, 2019

Tutorial: Animated Hexagon Buttons with CSS Transforms in Oxygen

hello world!

In this tutorial, you'll learn how to create custom animated buttons using the new CSS Transforms feature in Oxygen 2.2.

With Oxygen's fundamental components and visual CSS manipulation, you can create advanced custom elements without needing pre-built blocks or add-ons.

You can visually style pseudo-elements like :before, :after, and states like :hover using the State Selector in the Properties Pane. Once you've applied some styling or CSS transforms to an element's :hover state, you can set its transition duration under Advanced > Effects > Transition for a smooth hover effect.

In this tutorial, we'll use link wrappers with classes so that we can style them all at once, and we'll style their :before and :after pseudo-elements using CSS transforms to make them hexagonal. Finally we'll apply a saturation filter and transform rotation effect on the link wrappers' :hover states to make them go from grayscale to full color with a 360 degree rotation on hover.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Oxygen Today

Lifetime, unlimited site license

Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram