CSS Button – with internal diagonal shadow

[michaeljalmond]

Got a button in a design which looks simple but not sure how to achieve this in simple css. Can think of a few longer ways round but wonder if theres a nice clean method.

Theres the internal diagonal corner to corner like a shine… so how can i get it so it’s always corner to corner no matter what the width. I’ve tried a css triangle but that doesn’t work. Background cover :afters and some rotating but cant seem to find a nice solution.

Only thing i can think of is an internal span with an img in?

Thanks :)

[Paulie_D]

I’d go with either an SVG or, at worst, a diagonal gradient but the latter tends to suffer from antialiasing on oaccasions

http://codepen.io/Paulie-D/pen/XbwpXN

[Author]

Posts