In CodePen

Animated images are all well and good and the code examples above don’t really show you too much. So I’ve created a quick CodePen with working examples of a button using border and one using box-shadow.

On Support

It’s 2016, browser support for box-shadow is pretty good (if you go with global statistics). According to caniuse.com it’s available on 91.33% of browsers being used daily. That other ~8 percent though. IE8 and Opera mini (5–8), let’s not forget those. We need to look at doing something similar.

IE8 Fallback

For IE8 we can use a conditional comment to target that browser by having a HTML class available. We could perhaps keep the border or we could remove the border and add text-decoration on hover, something like:

Now we can write some CSS that will work giving Old IE, Opera Mini and the original border effect and if the browser does have box-shadow and JavaScript doesn’t fail to load we get the nicer effect using box-shadow:

Over Engineering

Is this solution too much? I guess when you look at supporting as many browsers as you possibly can, then maybe it looks that way. Perhaps you could forgo the support for Opera Mini (5–8) as the button will still have the whitespace around it to make it look not like a paragraph of text. You could change how you create the 'button'. Perhaps only add a style reset for anything with box-shadow and leave OldIE and older Opera mini browsers with a default button style. Whatever's fit for yours and your users needs. Personally I’d be happy to add a couple more lines of CSS for this so that it can work for as many browsers as possible.