Creating button effects with box shadows and border radius

As I had a free evening last night, I decided to have a bit of a play around on CodePen – yeh, I know, I totally know how to live.

I wanted to make use of an effect I saw a while ago on the Beemuse site, which used CSS3 box-shadows and border-radius to create a kind of 3D paper effect in the way the elements were styled. Thinking this could be used to make some simple but nice looking buttons with interesting state effects, I made this demo.

The effect uses box-shadows, borders and border-radius to vary the depth when the user interacts with each button.

Hopefully it‘s clear from looking through the code how each effect has been created, but get in touch if you have any questions about any of the effects in the demo.

As I started to play around with different effects last night, I kept finding new and interesting variations on the same theme. I‘m sure you can probably think of some more – if you can, fork the demo and play around with the code yourself; I‘d love to see what you all can think of and create!

Since I put up the demo last night, it‘s actually hit the CodePen homepage top picks list, and has now been viewed over 2000 times and hearted 70+ times (and counting). Thanks for the great feedback so far!

Article posted on the 16th July 2014