Buttons and links

The ‘call to action’ is all-important in the creation of digital designs. Buttons and links are therefore another important tool in our digital toolbox. Here you can see examples of both types of user interface action.

Index

Buttons

We use buttons for the primary call to action. The rectangular form attracts the eye. This helps when making the call to action extra-clear. The button is available in full colour or as an empty circle. 

In full colour, the button is red with white text. As an outline, both the text and line are white.

The text of the button uses Mont Semibold.

Padding (the space between element and border) depends on the size of the button, because clear space is always based on a calculation factor.

Definition of the padding for buttons

Padding top/bottom x 2,5 = padding left/right

Links

Text links are used in various sizes and designs. Common to them all is the fact that the text is underlined using the style associated with the chosen font.

For small calls to action, we use Merriweather Light in the same size as the text, with the link as an integral part of the context. We use a red colour of text – or white on a red background.

We can also formulate a link within texts as a title with underlining. Here, we are using the Mont Semibold font as standard in black or white, depending on the background colour.

This type of text link is used to emphasise important calls to action as an alternative to buttons.

In social media, online banners and newsletters, text links must always be underlined. On the website, underlining is primarily used when hovering over text. Where large text links are used, underline is the default.

Further questions?

Send us an email and we will respond as soon as possible

marketing@itm8.com