2

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

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

6 Answers 6

3

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

3

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"

2

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

1

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!

1

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 http://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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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