My current login page looks like this: Login page

I chose green and grey basically at random, and am wondering how to to represent them properly. The login button is the main action, since this screen will only display to users typing in a URL directly, which I think should mainly be existing users.

How can I show this?

  • 1
    There are two questions, if I understood correctly. Main one: How to represent a form to log-in and register in the same screen, what fields to hide, etc. Second one: How to denote one of the buttons over the other, and probably also, which to mark over the other. Did I misunderstood?
    – Alvaro
    Commented Jan 26, 2017 at 14:37
  • 1
    I've removed the 2nd part of this post. Quetsions posted here should only contain one question.
    – JonW
    Commented Jan 26, 2017 at 15:26
  • 3
    Note that for the question @JonW edited out: Depending on the confidentiality grade your users expect, revealing the existence of an account registered on a certain email address could be a breach of privacy. For example, if your website is an adult website catering to certain niche markets, your users probably expect that someone can't figure out the existence of their account based on what the website does when attempting to use their email to register a new account, login to the service, reset the password.
    – Nzall
    Commented Jan 26, 2017 at 21:53
  • 1
    @Nzall Confidentiality isn't so important for this, but shouldn't a user when trying to register be told if the email is in use? Or is it better to allow duplicate accounts with the same email address?
    – penalosa
    Commented Jan 26, 2017 at 22:21
  • 2
    Also - black text on darkish green background is discouraged, as it doesn't adhere to WCAG standards (too little contrast) Commented Jan 27, 2017 at 10:57

5 Answers 5


The color of the login button should match the primary color of your style theme.

Apparently, you're using material design. If your theme, for example, uses blue (#2196F3) as a primary color, your primary action buttons should also be blue so they are contrasting the rest of the page and are easily distinguishable.

login page with blue colored log in button and colorless and borderless registration button

The "Register" button which is the secondary action in the page should be less prominent than the primary action, therefore not colored. You can view color style and button guidelines from google material design.

Google material design style guidelines for the buttons and their color

  • 3
    Very good reference on the color, it depends on the color scheme of the app +1. However, I am not that sure about mixing a Raised button and a Flat one.
    – Alvaro
    Commented Jan 26, 2017 at 14:53
  • 2
    @Alvaro Open the button guidelines page and read the section about persistent buttons. They advice the following: Do not use raised buttons within persistent button areas. Commented Jan 26, 2017 at 15:43

Your "call to action" doesn't have to be green, it just has to be consistent. Start with your design guide if you have one or create one if you don't and provide a consistent look and feel across you application/site.

  • 1
    +1 for this answer, additional information for @mnbvc you could use your main color of your app also as your primary CTA, such as airbnb, if you want to use green color which is good color that represents safety, secure, site that i know using the green color for their CTA is facebook. Commented Jan 26, 2017 at 15:56
  • 1
    @RobH. www.roh.org.uk uses green for CTA and red for theme Commented Jan 26, 2017 at 17:36
  • 1
    @NicholasShanks yeah thank you for adding some example, green also could represent "Go" which is we can see on traffic light (a conventional meaning to everyone). Commented Jan 26, 2017 at 17:59

Only very few actions are commonly associated with a specific color. These four "colors" (counting gray as a color for sake of simplicity in wording) are examples for those that can induce an understanding of what an UI element does just by the color:

  1. Red for ending: cancel (end the action), delete (end the existance), close (end the application/popup), hang up (end the call) to name the most common ones.
  2. Green for approval: accept call, confirm action.
  3. Blue font for hyperlinks
  4. Gray for a disabled state

For login or register, there are no common colors (at least as far as I know). So rather than trying to use the color to describe the action, just use the difference of colored vs. not colored, where the color should be the defining color of your theme.

In general, only color one "default" button per view. The default button is the one that people are usually going to use (in a psychological way, you could also argue it is the one you want the people to use).

For the login form, that would be "Login", since you register once but login every time. Hence, the color of the register button should be "none" (just a link or a white button, if you want to stick with a button), whereas the color of your login button is dependent on your "corporate design".

Aside from all that, I'd like to highlight one general aspect of coloring, especially since the "random" design you provided is the best example for it:

At all times, keep in mind that roughly 5% of any user group are color blind. For your example, those people would see two gray buttons.

  • Shouldn't we use red on something navbar like buttons, so the user get more enthusiasm to click on it? while keep theme blue to convey the effect of calmness and let them stay more? Commented Jun 18, 2019 at 15:27
  • 1
    In this case, red is used as a signaling color in general to attract attention. Of course this is a valid approach when designing a UI, as long as it is the one button people would usually not notice e. g. because it's new. You just have to be aware of the eye getting used to patterns. If you have a long list of items but all have a red dot to indicate the "new" state, the dot doesn't work as a highlighting marker anymore, it is reduced to become an enumerator for the item count.
    – LWChris
    Commented Jun 19, 2019 at 0:21
  • the site i'm writing, need to be filled with by user hands, and for the begin i need to somehow attract users to insert data, while they may not wish to trust me at the begin, i wish to encourage them, or annoy them with red button within calm blue to make them hit the button and take very least step toward inserting content. that's my approach. also although the red may be annoying, since it's over-popping in blue ( btn-danger with navbar-primary and two white text field beside it, bootswatch.com/cerulean ) i don't think it can be offensive in that big blue.... Commented Jun 19, 2019 at 7:13
  • 1
    @deadManN I don't think colors do a good job at making users do something beyond gathering attention or conveying an emotion. Layout and wording do a lot better in persuading. A red button might attract attention, but if it reads "Send data", people still won't click just because it's red. Context, layout and user guidance should have a way bigger influence (e. g. having a popup asking you to fill in data with a big confirm button, and a small link "not now", as seen in the Windows 10 installer when it comes to MS account vs local offline account.)
    – LWChris
    Commented Jun 21, 2019 at 14:39
  • that's a good point... Commented Jun 21, 2019 at 16:06

Isn't the confusing thing that a new user wanting to register is being presented with a request for a non-existent password? Or is he being asked for a password that he will be registered with when he presses that button, in which case how does he know he has typed it correctly?

So I would have thought that the first thing the user sees should simply have two buttons LOGIN (to existing account) and REGISTER (as a new user). Having the bracketed texts on the screen near the buttons might also be useful. LOGIN will then simply ask for user-id and password, REGISTER for whatever else is wanted before you create a new user.

If it's a question of not wanting more than one round-trip to the server for efficiency reasons, just have the email and password fields hidden until the LOGIN button is clicked. Possibly likewise for REGISTER and its associated fields, if it's not a multi-screen registration process.

Alternatively present a LOGIN-only screen with an obviously-different "Not yet registered? Click here to create your free account" (or whatever) styled as an obvious hyperlink, not a button.

There's one other thing missing: "I've forgotten my password" (hyperlink)

After all that I'm not inclined to think that the colour of the buttons matters provided they aren't in the error - warning - alert spectrum of expectations (usually red through yellow). Personally I like blue. The overall colour theme of the site is relevant here.


In addition to @KristiyanLukanov answer, when the buttons are disabled don't use color.

  • Disabled: Buttons shouldn't have color if they are not enabled.

disabled buttons

  • Enabled: Both buttons can use the accent color or only one, if you want to emphasize it.

enabled buttons

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