My current login page looks like this:
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?
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.
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.
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.
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:
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.
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
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.
