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:
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:
My question is: How can I design my buttons to be obviously click-able?
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:
You could also try asking over on UX for other UI-centric thoughts.
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.
Commented
Jun 19, 2011 at 9:44
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)
Commented
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.
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,
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.
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.
