Get Oxygen
April 12, 2019

Tutorial: Animated Hexagon Buttons with CSS Transforms in Oxygen

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 *

Soflyy is proud to offer you Oxygen, our vision for what visual website design can be. We love it, and we think you will too.
More About Us

Stay up to date with Oxygen

© Soflyy 2018
Designed with Oxygen.
Legal
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram