Back to overview

Buttons

Button types

Buttons are used for functions in forms. Only the-call-to-action button which is used for campaigns on the homepage stage and on the landing pages can also be used as link to a new page.

TypeUsageProperties
Call to action buttonAs „Call to action“-button only on the homepage stage and on the landing pages

Font: Verdana regular 12px, line spacing 16px

Font color #ffffff

Primary action buttonFor primary functions within forms, tables or teasers. It should never happen that two or more primary action buttons appear close to each other.

Font: Verdana regular 11px, line spacing 15px

Font color #ffffff

Secondary action buttonFor all secondary functions within forms, tables or teasers. Several secondary action buttons can be combined.

Font: Verdana regular 11px, line spacing 15px

Font color #0098a1

Primary action button inactiveUsed e.g. before a product is configured (when a configuration is necessary)Opacity: 50%
Icon buttons with and without textSingle icons on buttons indicate that a function is triggered by clicking it (e.g. „Delete“). Icons in combination with text (e.g. „Close“) indicate an action within the actual page. 

Button sizes

Call to action button

The width of the call to action button depends on the amount of text it contains. Minimum width is 120px (approx. 13 characters), max. width is 200px (approx. 24 characters). It is recommended to place only text of 1 line in this type of button. Only if absolutely neccessary 2 lines of text can be used (approx. max. 45 characters).

Primary and secondary action buttons

The size of primary and secondary action buttons depends on the amount of text they contain and/or on the amount of available space (e.g. in tables with many columns).

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines