Button colors are chosen based on the button's function and action type.
Action TypeThe action type refers to the the type of consequence clicking the button will have.
Green- Green often induces feelings of happiness, positivity or accomplishment (like receiving exp or money in a game). Thus it is used for positive actions such as saving, accepting a friend request or giving something to someone.
Red - Red can induce anger, strong emotion and negativity. Thus is used in places where you are performing a negative action such as blocking, deleting or canceling something. Basically actions that you want to think twice about before taking.
Blue - Blue often induces calmness, positive feelings and thinking. Which is why you see it used for primary actions on pretty much any website based off bootstrap or similar frameworks.
FunctionFunction type refers to the purpose of the button.
Primary - Primary buttons are buttons who trigger the main action on the page. For example, when working with a form, the primary action is to submit the form. Everything else is secondary. This is why submit buttons are blue. Other primary actions would be posting a new topic on the forum list page or posting a reply to a topic.
Submitting in and of itself is neither positive or negative. The content of what you're submitting is what would make the action of submitting positive or negative. So because submitting is neutral and a primary function, the button is blue.
It's also possible for a page to have multiple primary actions. If a page has multiple sections of content, each section can have a primary action. Take our tools page for example (
services/index.php), each tool has a primary button because the purpose of the page it to open a tool and there are multiple tools to chose from.
Secondary - Secondary buttons serve any action that is not a primary action. If a button is secondary, it's color is chosen based on it's action type. If it's neither positive or negative then is uses a neutral color which in our case is gray.
So as you can see, a lot more effort goes into choosing colors. While I have taken some liberties I am following the design patterns most modern sites follow to reduce the learning curve of our site while looking good.
