Buttons are, just like links, the basis for interacting with users. There are two sizes to choose from, depending on the priority of the interaction.
- The button color is based on the main corporate color of the page.
- Mouse-over and inactive states are the same for all buttons.
- There is an Icon version available for the standard size.
- The Button grows proportionally with the length of the text.
- Buttons and content are aligned left (centered in VP1). In special cases – like forms – they could also be aligned to the right of the content.
The Standard Button can be used several times per page. Its typography is set to regular, centered and should be kept as short as possible to make sure the user understands it and to display the Button correctly in all viewports.
Large call to action
The large Button can be used only one time per page. It shows the main interaction or conversion. The typography is set bold and centered. The text should be kept as short as possible.
Buttons with icons
The use of Icons helps the user to understand the Buttons function more intuitively. For example, the use of an arrow to the left makes it clear that you see a Back-Button. The choice of the Icon should therefore always match the interaction. This Button should only be used once per page.