Buttons & Links
Buttons help people initiate actions, from contacting an agent to filtering listings.
Buttons help people initiate actions, from contacting an agent to filtering listings.
Buttons and text-based hyperlinks are the primary user interface tools to provide straightforward ways to interact with our digital assets. Choose the type of button based on the importance of the action. The more critical the step is, the more emphasis its button should have.
The CENTURY 21® digital branding allows for several color choices of filled, tonal, and outline buttons. These colors should follow the element prioritization and must always comply with current ADA and WCAG requirements requiring at least a 3:1 contrast ratio to adjacent colors.
All buttons and hyperlinks should include text, not just graphics. Never rely on a presentation that uses only color, shape, or placement alone.
Please be advised that the ADA legal landscape is constantly evolving. You are required to ensure your business is in full compliance and we encourage you to consult with your attorney.
Filled and Tonal buttons styles defined here can be used on any approved background color.
The purpose of buttons are to communicate actions that users can take. They are typically placed throughout your user interface, in places like:
Example of a call to action tonal button with an icon
Buttons are just one option for representing actions in a product and shouldn’t be overused.
Too many buttons on a screen disrupts the visual hierarchy and confuse the primary actions users can take.
Use sentence case for all headlines, taglines, and buttons greater than 2 words.
Don’t add excessive horizontal spacing between the letters in sentence case headlines.
Use the primary typography as the default headline font style.
Don’t use a line-height (line spacing) that is less than 1.5 times the font size.
Use primary and alternative font weights in headlines to indicate visual priority and emphasize specific words.
Use caution when mixing sentence case and uppercase fonts in a headline as it can make headlines hard to read.
Use caution when mixing sentence case and uppercase fonts in a headline as it can make headlines hard to read.
Use caution when mixing sentence case and uppercase fonts in a headline as it can make headlines hard to read.
Buttons are comprised of (4) parts.
There are (2) fonts approved for button use. Refer to the typography section for details.
Buttons have border-radius: 0px
Filled buttons utilize the brands primary colors.
Example of a filled button in a hero on desktop
On mobile
Tonal buttons are generated from a tone of the primary colors.
Example of a tonal button of obsessed grey in a hero on desktop
On mobile
Outlined buttons have a border and text color that is identical.
Example of an outlined button in a hero on desktop
On mobile
Outlined buttons need to follow the text over image standards when used in unison with images.
Replace outlined buttons with filled buttons for use over images.
Do not place text or outlined buttons over images.
Text links are used for the lowest priority actions, especially when presenting multiple options.
Text links can be placed on the approved light and white background colors.
Text links have less emphasis than tonal and filled buttons and can be used in a paragraph.
The color and style of text link must always be recognizable from non-hyperlinked text and elements.
Text links by default have an underline.
Text link in a paragraph with other text.
Text link in a mobile snack bar.
In paragraphs, text links help maintain an emphasis on the sentence as a whole while providing a useful link for users to explore topics and keywords.
Example of a text link in supporting text in a hero module
Replace outlined buttons with filled buttons for use over images.
Do not place text or outlined buttons over images.
When text links are paired with form elements they can be used as a lower priority actions.
Example of a text link with an icon paired with a form element
All the sates a text link can take.
States of a text link
There are (2) types of button fonts, one all-capitalized and the other sentence case which serve two differing purposes,
Sentence case buttons are used to give the user a more descriptive link.
All-capitalized buttons and text-links allow the user to quickly differentiate or take action by quickly scanning the 1-2 words in all-caps.
Sentence case text buttons allow the user to easily understand where the link would take them and allow for more descriptive actions.
All-capitalized buttons and text-links allow the user to quickly differentiate or take action by quickly scanning the 1-2 words in all-caps.
Only use all caps (Button 2) for one to two word buttons and actions.
If your button is more understandable with more text, simply use sentence case (Button 1) styling.
Use all-capitalized buttons for 1-2 word actions.
Switch text stye to button 1 if one or two words does not clearly indicate the action then user will take.
Controls for a slider can be a great use case to utilize all-caps buttons as they are typically abbreviated.
Be sure to pair all-cap buttons with icons that allow the user to properly understand their function as abbreviations alone will not indicate their use properly.
Use all-capitalized controls on a content slider.
Don’t use all caps in buttons that need more than 2 word descriptions for a 9 year old to comprehend.
