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.

Standard button
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.

standard button.jpg

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.

large call to action.jpg

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.

buttons with icons.jpg

responsive behaviour.jpg

a. The Button size behaves proportionally to the inserted text and the font size of the respective viewport. Buttons always appear in combination with other components – at least with text.

b. The smallest viewport displays the Button on full grid width.

Related topics


Kontakt und Feedback

Das Team Brand Consultancy berät Sie gerne bei Fragen: Kontakt.
Wir freuen uns über ein Feedback zum Brand Portal.