September 3rd - Oxygen 3.0 is now available - see what's newlimited time special pricing available

Animated Hexagon Buttons with CSS Transforms in Oxygen

Video

6

of 16

in Design How-To's
Description
Comments (0)

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 *

Author
Louis Reingold
Louis Reingold

Follow along with this tutorial

Create Test Install

Get Oxygen Today

Lifetime, unlimited site license

Need more help?

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