An effect that makes the Crikkket web app unique is it’s crisp 1px highlights. I’ve always heard these described as specular highlights, but I don’t believe that’s the correct term. Anyhoo, I was just playing with CSS3 and I thought I’d have a crack at animating the same effect on a button. So here you go!
Demo and Source are on JSFiddle.
You will notice that the highlight width is locked off, because I think if it scaled with long buttons the effect wouldn’t be as believable. I also know that I could have done this with pseudo elements like ::before, but sometimes it’s good to see exactly what’s going on in the DOM.
Disclmaier: Webkit only. No images used.
