Should Buttons be all the Same Color?

Is it better to pick one color/style for Buttons on your website, or can you have maybe 2-3 colors/styles?

Paul O’ showed me a really easy way to turn a hyperlink into what appears to be a button using a background image slice.

See attached.

I love these buttons, but also have some glass ones - which are completely images - that I also like…

(I think the Orange Button on a Yellow Background probably looks better than the Blue Button.)

[b]So, what do you think?

Should I pick one color/style for my entire website for buttons, or can I mix things up a bit?![/b]

Thanks,

Debbie

You have to think of why you’re changing colors on your users. Buttons are “calls to action” that you want your users to make use of. Maybe all your blue buttons are for information, your orange ones are purchase buttons, etc. I don’t think there’s an “either-or” answer for this question as much as there is a question of usability and design preferences. But choosing different buttons merely because you like them all and want to toss them about the page is not good design practice. :slight_smile:

My pal Jacob Gube wrote an article that doesn’t directly address your question, but nevertheless is worth reading to address some of the underlying issues: Making User Interface Elements Difficult to Use By Intent

By the way, it strikes me that some forum readers might be interested in the method Paul showed you to make the buttons. Could you link to that in your post, or post another comment with the link?

I agree, but that isn’t my motivation…

First, I started off with glass buttons that I created with some online wizard. And the color scheme I used was supposed to compliment the surrounding area and background. (e.g. Orange Glass Button on a Buff Background)

(I’m not so tied to the last, Black Button.)

Next, I found some new buttons I liked online, and then Paul O’ showed me the way-cool technique of slicing them up and using them as a background image behind a hyperlink.

The reason that I feel conflicted is that a Blue Button on a White background looks good, but my original Orange Glass Button looks good on a Yellow/Buff Background.

I could just use Blue Buttons across the board, but that seems too rigid, and probably won’t look as good in some areas of my site where I have panels with different colors.

And thus the $10,000 question is, “How much variety/variance is acceptable to End-Users, and where do you cross a border where you are confusing people?!”

(If the Submit and Command Buttons are always Blue then people definitely know what to expect when they see a Blue Button. But then again, maybe Users are adept enough to realize that any time they see BLUE or ORANGE (buttons) that they need to pay extra attention, because it is a “Call To Action” (i.e. a Button) that requires their attention!)

Follow me?

By the way, it strikes me that some forum readers might be interested in the method Paul showed you to make the buttons. Could you link to that in your post, or post another comment with the link?

Well, as is true with most of my threads, it was a long, drawn-out conversation, but the good stuff picks up at Post #27 here

Debbie

P.S. Paul’s technique is really immaterial to this conversation, other than the fact that if I get a thumbs-up on having 2-3 different color buttons, then I’m going to convert my clunky Orange (and maybe Black) image buttons and turn them into slices using the same technique I did for my lovely Blue Buttons!!

So, what do you think, Black Max?

Debbie

For mine, things that do the same thing should basically look the same on a site. So I would look at stye (bg colors etc.) that work for a single button. For example, you don’t need such a bright yellow bg. Go for something much subtler.

There are few things worse on a site than not knowing what you’re supposed to click. Even if the button is really overlty a button to be clicked, I would still be careful about having too much variety.

Don’t like my “Events” ad (with the Buff background and Orange button)?! :-/

(I can see that maybe my Orange background and Black button are too strong, but I like the second attachment above…)

Debbie