So here's some context.

I have a button whose action changes importance during a certain time of the month. For a good part of the month, the action remains unimportant (a user can 'preview'). After some time, it becomes important (a user can now 'preview and submit'). Submitting is the most important action at this point.

So my question is — What's the best practice for visually styling this button? Is it ok to use one colour for when it's not important and have it switch to another colour when it becomes important? Or could these colour changes confuse the user? Would it be better to keep the styling consistent all throughout?

Would appreciate your thoughts!

  • 1
    Why changing colors etc.. Just have label change from "Preview Only" to "Preview/Submit". Straight forward. Zero confusion.
    – PK2016
    Commented Dec 31, 2015 at 3:00
  • While the button is "Preview Only" there are other more important actions on the page that I would like the user to take. When the button becomes "Preview/Submit" it becomes the most important action on the page. I thought of using colours to signify this change. A ghosted status to start, and then a solid colour when the change happens. I think if I kept it to one colour and just changed the text, it would compete too much with the other actions when the button is "Preview only"
    – ebdiver
    Commented Dec 31, 2015 at 4:45

3 Answers 3


You can use multiple approaches for that like sizes, color, relevant contrast of button's background and its foreground text.

But in your case, you can use multiple styles of buttons to repreaen that. For eample, bootstrap uses following three button styles which can work for you.

  • Ghost button style
  • Outline button (for secondary actions)
  • Solid buttons (for primary actions)

But visual changes may not be sufficient to convey their importance for the user. Visually, you can only indicate that something is important on the screen but if it has become more important than before is not conveyed unless you use additional clues (text description) to indicate that.

Hopt it helps.

enter image description here


I would assume, and I'm a big fan of testing assumptions, that a user would want to know that the status has changed. In that case a change in color (or whatever) would be a useful indicator of a changed status.

Email programs (Outlook, Gmail) provide visual indications of status changes (from read to unread). A user of your system would be aware that a status change would be coming and would want to know this in order to "preview and submit."

  • I would assume that too. I'll try it out this way and then test to see whether the change in colour causes confusion. Thanks for your help!
    – ebdiver
    Commented Dec 31, 2015 at 4:52

These are completely different functions.

So IMO you should have two completely different buttons, and with seasonal availability...

[ Save ] [ Save and Submit ]

One would be clearly shown as unavailable, and the other would be shown as available (i.e., your OS would do that, using whatever metaphor - grayed-out, etc - happens on your OS**).

if you think about it, this is commonplace and you can see any number of examples of it in software you use every day....

enter image description here

For example there, with the various versions of "Open", only some are conceptually possible at this moment depending on whatever documents I was using. I'd say this is so standard that you pretty much "have to do" this.

Note however that due to the unusual seasonal variation concept here, I'd spell it out.

As advertising copywriters say, "Tell people what you are going to tell them, then tell them, then tell them what you told them." Go with KISS to the max.

[ Save ]                      [ Save and Submit ]  
Available only until Dec 15   Becomes available Dec 15

Simply do this with long, explanatory texts under the various buttons. It's possible your environment has a standard-looking concept for such "explanatory texts with buttons".

(Personally I like it sort of on the button, ie mega-buttons with that text underneath the main button text, if this is available. so there is utterly no possibility of confusion by the user!)

** Note that of course, for 10? years now you have no choice whatsoever about indicating "available" "non available" etc buttons, nor indeed any influence at all over the design of buttons. All software must simply and always use the buttons as decided by the OS.

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.