I had to make a page with a couple links on it, so I thought I would try to make the links big and decorative:

My button

But I ran into the problem that people didn't realize it was a button, so they didn't know what to click on. It's obvious that something like this is a button:

Obviously a button

My question is: How can I design my buttons to be obviously click-able?

6 Answers 6


This isn't really a "graphic design" answer, but you may also want to see if you can change the text. In your examples, I don't think the art of the "install" button is particularly more button-like than your Outlook button. However, the text on it is a well-known verb so it is associated with performing an action. In the same vein, "Launch Outlook" may attract more clicks than simply "Outlook".

From a graphics standpoint, (and further to jhocking & luckycypher's comments), some other things you could try:

  • Make the edges glow on hover
  • change background/border color schemes on hover
  • add a subtle shadow (with or without beveling the surface) so the button appears raised from the page
  • add a small icon next to the text to indicate what action is to be performed (if I 'Outlook', what am I doing?)
  • place your button in a location where other buttons are typically placed on your site
  • make the button theme match other navigation links/buttons on the site.

You could also try asking over on UX for other UI-centric thoughts.

  • 5
    Spot on. Ask yourself: what is the call to action of this button? Buttons usually do something and having some action on them makes the user identify it as a clickable one. See e.g. buttons/links on this page: edit, close, flag, add comment, post your answer (intentionally skipped link as it may be confusing at times) — all clearly have some action to run. Jun 19, 2011 at 9:44
  • 1
    To add: even might–be–confusing link is clearly seen as a button since it looks the same as the obvious buttons next to it. Users usually seek for patterns. For example, if you had an install button and an outlook button and style both the same way, users probably interpret them both as buttons. (OK, a lot of repetition to your answer, but it does just prove you're on the right tracks :-D) Jun 19, 2011 at 9:48

The key here is affordance - visual clues for the user to be able to determine the behaviour and intended use of something from a distance - before interacting with it - like a flat plate on a door says push and a handle says pull.

See here for my own examples of affordance.

The main cues are beveled edges and gradient fills for a 3D feel and if appropriate with distinct drop-shadowed edges indicating a real raised and rounded button that makes you just feel you want to push it, combined with a clear call to action such as an appropriate label and/or well chosen icon. Note that rounded corners are more friendly and square corners seem harsh to the eye.

See my tutorial on creating simple metal and glossy/glass effect buttons using Inkscape.


Bevel the graphic so it looks 3 dimensional.

  • 3
    Also have add a hover state, either with css or javascript. Jun 17, 2011 at 20:47
  • CSS would be preferable in this case.
    – Kyle
    Jun 18, 2011 at 10:48

you should use two kind of image one is on active and one is normal state normal state will look bit embossed

attaching a SS and see how they clarifying different stats of a button,

example image for showing buttons

and whenever user get on your button change cursor to hand it will feel like link,if possible you can write in small click here to instal..or you can point this button with the help of any arrow or something like that...

see how others showing there download/install buttons.

Latest trend on buttons

Follow these tutorial to create such nice looking buttons


I think the color and border style of your button is not the main issue of your button. It might be that it is too big! It looks more like a word/title in a frame than a button. Try to just make it a bit smaller so the text inside it fills out (at least for the height).

As others have said, it will also help to have it pop out somehow on mouseover.


Why don't you underline the text on the button (or make it blue even) - this way it will be perceived as a link and users will know clicking it would get them somewhere.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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