Buttons are one of the most important elements on your site. They, like any other element on your site, should have consistency, not only with each other, being the same size, with the same spacing, behaving the same way during interaction and having the same colors, but they should also follow the design of your site.
One of the more common practices when creating a button is to use so-called accent colors. That is, if your logo has 3 colors, of which one is rather secondary, simply complementary, non-primary, this color, especially if it is bright enough, you could use for accentuation in your design, as well as for the colors of the buttons.
Note: The button above is an example and does not lead anywhere.
In general, buttons should follow the following principles:
Main style
The main style of buttons is the one you will use most often. Buttons have the following basic shapes – with a background (filled), without a background (outlined), without a background and outline – underlined. Usually, backgroundless or underlined buttons are used for a secondary page. For example, if at the beginning of your site, you have a “buy” button, next to it there may be a secondary (for you and your business goals) button that says “learn more”. These buttons are usually either just an underline or with a much paler, blending background, while the main, important for you and your business goals buttons are in saturated bright colors. Of course, like everything else, buttons are also context-dependent, and if you have a very saturated background color, it would be better for your button to be just white than to put another saturated color on top, especially if the colors don’t match.
Shape
In addition to style, buttons also have shape – padding between the text and the borders of the button, shadows (box-shadow), and rounding or lack of rounding at the corners (border-radius). It is important that these styles are appropriate for the overall style of your site. Buttons with sharp corners do not look good when everything else on your site is rounded, and vice versa.
Variants
As mentioned above, buttons should have several variants that you should have prepared.
- Main – the most frequently used button. Their purpose is to be clicked, so they need to be easily visible. This is achieved by using brighter colors or ones that stand out against the background they are placed in.
- Secondary buttons – whether they have a background (for example, gray), are simply outlines, or are just an underline, you need to have a design for your secondary buttons that you can follow.
- Inactive buttons – what happens to a button that cannot be clicked before the user performs some action? It is good for these buttons to not only be paler, but also to tell users what they need to do to activate the option behind them, whether it is registration or new information.
Content
The content and texts that we write, as we know, are a whole science, which is why an entire branch of marketing and advertising is dedicated to the so-called copywriters.
For the text in the buttons, you should try to achieve:
- Comprehensibility – the user should be able to easily understand what will happen when pressing the button.
- Attractiveness – especially buttons related to some important action for you, such as a purchase or registration, for example, should have a sufficiently attractive message, while taking into account the tone of your brand.
- Contextuality – the buttons should be consistent with the place where they are located. In cases where your brand tone is too casual, it may or may not be a good idea to use the same tone for important actions, such as accepting cookies. It is perfectly normal for the button text to say “I agree” or “Cancel”/”Dismiss”.
