: 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

@Bethany839

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.

Vote Up Vote Down

@Angela777

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. github.com/michaelhue/keyscss


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

Vote Up Vote Down

@Cooney243

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.



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"

Vote Up Vote Down

@Speyer780

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 www.cameronmcefee.com/ 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 (http://en.wikipedia.org/wiki/Axonometric_projection) where 3D is impossibly stretched. Will update if I find a real name for it.

Vote Up Vote Down

@Ann6370331

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!

Vote Up Vote Down

@Candy945

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

Vote Up Vote Down