Dan Powell

Dan Powell

← Back to home
Preview of Flat Buttons' Striped Pseudo ShadowsView on CodePen ↗

Flat Buttons' Striped Pseudo Shadows


Flat Buttons are all the rage. Stripes are in season.

Rather than accomplishing the stripes with a repeating SVG or PNG background image, this CSS-only approach uses a strategically spaced linear gradient at an angle to produce an identical feel.

No tessellating knowledge needed.

A transformation and intentional z-indexing give a smooth resolve on hover.