Is there a name for buttons with a thick shadow underneath?

I have been seeing a lot of these buttons lately. I think it’s a recent trend. I would just like to know the name for it so I can explore them further. In this sprite image, the buttons on the bottom with that bottom border is the style I am referring to:

enter image description here

Answer

As I was reading this I was struck by the similarity of my keys on my keyboard to the buttons:

Keyboard

So I thought why not try a search on keyboard buttons. There has been a css stylesheet already created by Michael Hue, it produces buttons like this.
https://github.com/michaelhue/keyscss

MicroBevel

It’s not a leap to say these could be easily modified to make them look like the image you provided, simply change the gradients, backgrounds, and add a CSS pattern using something such as Patternify

As others hinted, you shouldn’t use a Sprite when these are easily to replicate using CSS– which means you avoid an additional server hit for resources. I’m going to go out on a shaky limb here and call these keyboard buttons

Edit:
Looks like we implement something similar to this on SE, I had no idea. By using the < kbd > tags you can wrap words in a similar version of the keyboard keys

Attribution
Source : Link , Question Author : JakeRow123 , Answer Author : Adam Schuld

Leave a Comment