I am looking for the graphic design terminology for describing themed buttons used in a web application. The way I understand it is that certain color/backgrounds are created and various sized buttons use the background to display.

I have seen them out there - but have no idea exactly how they are used or how to talk about it.

  • Welcome to GraphicDesign.SE! I realize this is sort of tough, given the question, but can you be a little more specific or give an example?
    – Farray
    Commented Feb 18, 2012 at 17:21
  • sliding doors maybe? But that's being phased out in favor of sprites.
    – Scott
    Commented Feb 18, 2012 at 21:04

2 Answers 2


There's a method of making a generic button image consisting of a solid color (being the specular or highlight color) with an alpha channel controlling the buttons 3d contouring.

This allows the designer to control the color of the button by its (or its containing element's) CSS background-color property. This allows easy theme changes without resaving all bitmaps with the new background color.

It also allows one bitmap to be downloaded for sites with multicolored buttons or button states.

Unfortunately I don't know what it's called.

Here's a simulation in Photoshop:

  • Image masking. There is also css3 called mask-image and background-clip. On another note, I think you might confuse people by showing the changing of the color inside photoshop since in this case you woulnd't actually do that.
    – Joonas
    Commented Feb 19, 2012 at 10:01
  • Hopefully your comment and my mention of it being a simulation will keep confusion away.
    – jontyc
    Commented Feb 19, 2012 at 10:09

I'm not sure what you mean by "model", but usually buttons are created as part of a UI library. As part of the process, designers choose a particular visual style for clickable components such as buttons. This includes button shape (rectangles, rounded rectangles, pill-shaped, etc.), border style, whether to make it 3D with a bevel/drop shadow/gloss/etc., whether to give it texture, what font to use, how the different button states (normal/hover/depressed/active/disabled) look, as well as the color scheme of the UI.

There are pre-made UI libraries/themes out there, and sometimes designers will modify button templates, but with something as simple as a button, you typically just create them from scratch. And even if it's a more elaborate UI theme, you still need the buttons to match the rest of the UI components, so you'd probably create them from scratch anyways.

You may be thinking of pre-made buttons that you can download the images/CSS/JS for. Some people who aren't graphic designers or aren't good with CSS find them useful. You can find many of these by googling "CSS buttons" or "CSS3 buttons". Some of them can be easily customized for different colors/backgrounds/shapes.

  • Thanks - I think you captured what I was looking to understand here. While I am familiar with the UI library concept - specifically using jQuery UI, I did not know if there were other ways of describing it when asking a graphic designer to create custom buttons for a project. Commented Feb 19, 2012 at 14:45
  • @Mary: Yep, jQuery UI's a very popular UI library. But since it's a component library, it's a lot more comprehensive: visual themes + JS/CSS code. I was mostly referring to design libraries more akin to a single jQ UI theme, e.g. many companies keep build files that are simply an InDesign/Fireworks document visually cataloging a full set of UI components and their various states. A web or UI designer can then drop these components into their layouts as needed. And updating the build file updates all the layouts which use the components. Commented Feb 20, 2012 at 15:56

Your Answer

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

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