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:
As I was reading this I was struck by the similarity of my keys on my keyboard to the buttons:
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.
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
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