Skip to main content

🖥️ Display Sign in with Trusted button

Trusted Accounts provides downloadable logo artwork you can use to create custom Verify with Trusted buttons that display either a logo only or a logo and text. The logo files are available in PNG, and SVG formats and the artwork for both types of buttons includes both black and white versions.

Download Files Button

The Trusted button​

<button class="trusted-button">
    <div class="trusted-button-inner">
        <img src="/img/Trusted_Icon_White.svg" />
        <p class="trusted-button-text">Sign in Trusted</p>
    </div>
</button>

And here is what the button will look like. See the section Understand personalized button to see the different variants of the Trusted button to match the UX of your platform.

Button styles​

Trusted Accounts provides several Verify with Trusted buttons you can use to let people set up an account, sign in and verify. If necessary, you can also create a custom button.

Prominently display

Make a Verify with Trusted button no smaller than other sign-in buttons, and avoid making people scroll to see the button.

Depending on the style or mode on which your content runs, choose the variant that fits the terminology of your verification, sign in, and sign up experience and use it consistently throughout your interfaces.

Trusted appearance

When you use the predefined button, you get a button that’s guaranteed to use an Trusted-approved appearance and the user will recognize it faster.

Custom styling

Feel free to adjust the corner radius, height, width or font of the buttons to fit the other button on your platform. Make sure to use the right icons and colors.

The following button titles are available:

Three appearances​

Depending on the platform, Trusted Accounts suggests up to three options for the appearance of the Trusted button: white, white with an outline, and black. Choose the appearance that works best with the background on which the button displays.

Blue​

Use the blue style on white, light-color or backgrounds that provide sufficient contrast.

White​

Use the white style on dark backgrounds that provide sufficient contrast.

White with outline​

Use the white with outline style on white or light-color backgrounds that don’t provide sufficient contrast with the white button fill. Avoid using this style on a dark or saturated background, because the blue outline can add visual clutter; instead, use the white style to contrast with a dark background.

Button size and corner radius​

Adjust the corner radius to match the appearance of other buttons in your app. Usually, the Trusted button has rounded corners.

Minimum corner radius
Default corner radius
Maximum corner radius

Custom layouts​

If your interface requires it, you can create a custom Trusted button. You may want to align logos across multiple sign-in buttons, use buttons that display only a logo, or adjust the button’s font, bezel, or background appearance to coordinate with your UI.