Call to action

Overview

CTAs are clickable elements that are used to initialize actions. They communicate Calls To Action to the users and allow them to interact with pages. CTAs’ labels should describe what action will occur when the user interacts with it.

Each CTA has five different states designed, which are: default, hover, active, focused and disabled states. They are designed to serve accessibility, readability and SEO.

There are four different CTAs available, the Primary button, Primary inverted button, Secondary button and Animated button

Primary & Primary inverted CTA

Primary

Primary CTA

Primary inverted

Primary inverted CTA

Use them for basic and successful actions. They direct the user’s attention to the primary action that the website is suggesting the user to take.

Rules

  • Make sure that the CTA’s label represents the action in a pretty straightforward way and avoid using more than 3-4 words
  • Use Primary button on white or yellow backgrounds and Primary inverted only on black backgrounds

Secondary CTA

Secondary CTA

Use them for medium-emphasis actions or when a CTA isn’t necessary because it is pretty obvious what the user is supposed to do and/or get, when interacting with an element. E.g. clicking on a teaser or any other card to access its content.

Secondary buttons contain actions that are important but aren’t the primary action. They are also used to indicate a secondary action that compliments a primary action or to reduce visual noise when there are many actions of equal importance on the page.

Rules

  • Use them only on white or black background and never on an image
  • Keep the label short and direct. It shouldn’t be longer than 3-4 words

Animated CTA

Animated CTA

Read more

Use them very sparingly and on very specific cases. They are designed to have a sophisticated and luxurious style which differs from the other CTAs. They should be used together as a group in order to create a block with important content that really needs to stand out. USE ONLY ON COLUMNS – to write more

Rules

  • Use them as a group and create row(s) with more than one animated buttons
  • Use them only on columns
  • If you are going to use labels that are consisting of more than 14 characters (?) avoid placing them in 3 columns inside a row and prefer to use 2. That’s because in smaller screen sizes the large label won’t fit and it will have to break in two lines causing the CTA to expand in height
  • Use them for equally important content
  • Take advantage of the visual prominence they provide and don’t overuse them
Top