Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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. https://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
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"
I've seen the top row referred to as 'microbevel'
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!
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.
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.
