Button guidelines

Style

Vipps buttons are available in white text on orange.

Rectangular button	Pill button

See the Assets page to download variations of the Vipps buttons.

Exceptions (WCAG AAA)

Our orange buttons with white text meet the Web Content Accessibility Guidelines (WCAG) demands for AA (mid-range). If your website must meet the WCAG AAA (the highest accessibility range), you are allowed to render our buttons in higher contrast, either white or black background. Use prefers-contrast and -ms-high-contrast CSS media queries to detect if your users have settings that request high contrast.

Rectangular button	Pill button

This exception only applies to color. Don't create your own Vipps buttons or alter the font, button radius, or padding within the button in any other way.

Approved verbs

Norwegian

• Betal med Vipps
• Logg inn med Vipps
• Registrer med Vipps
• Fortsett med Vipps

English

• Pay with Vipps
• Log in with Vipps
• Register with Vipps
• Continue with Vipps

Best practices

✅ Do

• Use only the buttons provided by Vipps.
• Use the same style of button throughout your site.
• The button text should only use a verb approved by Vipps.
• Ensure that the size of the Vipps buttons remains equal to or larger than other buttons.
• Ensure that you choose a background color that contrasts with the button color.

🔥 Don’t

• Don't create your own Vipps buttons or alter the font, color, button radius, or padding within the button in any way.
• Don't use Vipps buttons to initiate any action other than a flow controlled by Vipps (either opening our app or a landing page).
• Don't make the Vipps button smaller than other buttons.
• Don't use a background color that's similar to the button color.
• Don't add hover effects.
• Don't add stroke.

👍 If you place a Vipps button next to another button, make sure the Vipps button is of equal size or larger.