Authorization page design
You can design the link for obtaining an OAuth token as a button with the Yandex logo.
Tip
When the user clicks the button, they are redirected to Yandex ID for authorization. Set up a link that opens in a new browser window so that the user remains on your website after authorization.
Button design
Customize the button to match the style of your website or app:
-
Customize the size: Choose the button of the desired width and height from the suggested ones, or set up the size manually based on the proportions of the original button.
Alert
The button design must meet the general Yandex requirements. When adding the button to a website or app, you can't change:
- The button's color.
- The button's border width.
- The button's content: text, icon, or margins between the button elements.
Button types
To increase conversion for authorization, we recommend using the option with the big contrast button:
Short button:
If you don't want to use the main version, you can use the additional one:
Short button:
The additional version can be used to place the Yandex button next to the buttons for other services.
Use the icon button if there's not enough space for a regular button:
Add the Log in with header to the block with the icon button. Don't juxtapose bright colors and use a neutral palette for the background.
Set up size
Choose the option that suits you best. You can further reduce or increase the button's height, while maintaining the aspect ratio.
L / 56px
M / 44px
S / 36px
Maximum button width is not limited.
When reducing the button's width, make sure the side margins are not less than the icon width.
Usage examples
If you only have the Yandex button, use the full format:
If there are multiple buttons, add the Log in with
header and use the short button format or the icon button: