Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
I don't believe a graduated rounded button with a block shadow has a "name" – Scott Apr 7 '12 at 1:53
There is no style name for this. Descriptors could include: rounded, orange, drop shadowed, gradient. – DA01 Apr 23 '12 at 14:11
I've seen resources sites refer to these buttons as "3D". – Yisela May 22 '12 at 20:40

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

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

share|improve this answer

It's a dimensional, 3-dimensional, or 3D button. It's not a new trend but it is more widely supported today without images ... which begs the question why is this done in a sprite sheet? Weird.

Scroll down to point 3 here for an example from 2011. And some from earlier this year here.

enter image description here

Another couple of terms to keep in mind.

  • Affordance: "a situation where an object’s sensory characteristics intuitively imply its functionality and use. A button, by being slightly raised above an otherwise flat surface, suggests the idea of pushing it."

  • Skeuomorphism: "an object or feature which imitates the design of a similar artefact in another material"

share|improve this answer

I've seen the top row referred to as 'microbevel'

share|improve this answer

I believe this is just a button made by someone who knows css3. Some borders, radius and colors. I have not seen a name for it anywhere either!

share|improve this answer

I'm not entirely sure it has a name, but the top I've also seen as microbevel.

Regarding the bottom row, It has become somewhat popular to stretch the bottom of the icon in an impossible shape. Not exactly flat design, but squashed design. See for example of the github icon in similar style. I haven't found an exact name for the style, though it reminds me of an architectural projection such as Axonometric projection ( where 3D is impossibly stretched. Will update if I find a real name for it.

share|improve this answer

I would call them Orthographic 3D or Orthographic Raised.

Orthographic Projection refers to the viewing of a 3D image where objects do not get smaller with distance. This means that vertical lines remain straight, and lines to the horizon are always parallel to each other.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.