Dan Powell

Dan Powell

← Back to home
Preview of The Bop It ButtonsView on CodePen ↗

The Bop It Buttons


From icons to logos to buttons, offset colors are hip and trendy.

This pen is a simple offset color button with a Pink. Excuse my color selection ability if you think the color isn't 100000% the best flat UI pink.

This color comes from a ::before pseudo element on the button that is slightly offset by means of absolute positioning.

Upon hover this offset is set to 0, 0 bringing the color in line.

I added some simple keyframe animations in line with the once trendy game "bop it".