Le bouton Se connecter avec Sporty
Les gens font confiance à un bouton de connexion qu'ils reconnaissent. Utilisez l'un de ceux-ci plutôt que de dessiner le vôtre.
Les boutons sont en anglais (Sign in with Sporty), la forme que les utilisateurs reconnaissent dans tous les pays.
Télécharger
| Style | Bouton complet | Icône seule |
|---|---|---|
| Clair, pour les fonds clairs | light.svg | icon-light.svg |
| Sombre, pour les fonds sombres | dark.svg | icon-dark.svg |
| Bleu, quand c'est le principal moyen de connexion | blue.svg | icon-blue.svg |
Le logo Sporty seul est mark.svg, pour construire un bouton dans votre propre bibliothèque de composants.
L'utiliser en HTML
Faites pointer l'image vers la route de connexion de votre application, celle qui lance le flux du code d'autorisation :
<a href="/auth/sporty" aria-label="Sign in with Sporty">
<img src="https://docs.sporty.plus/brand/sign-in-with-sporty/light.svg"
width="240" height="44" alt="Sign in with Sporty">
</a>
Vous pouvez aussi héberger vous-même une copie du SVG. Les fichiers ne changeront pas.
Pour construire votre propre bouton, gardez les mêmes éléments : le logo à gauche, les mots
Sign in with Sporty (ou en français Se connecter avec Sporty), un fond blanc #FFFFFF,
sombre #131314 ou bleu Sporty #02AAF5, et des coins arrondis à peu près comme vos autres
boutons.
Règles
- Écrivez Sign in with Sporty ou Continue with Sporty, ou Se connecter avec Sporty. Ne raccourcissez pas en « Sporty » sur un bouton pleine largeur.
- Ne recolorez pas, n'étirez pas et ne redessinez pas le logo.
- Donnez-lui la même taille et la même importance que les autres boutons de connexion à côté. Pas moins de 40 pixels de haut.
- Laissez de l'espace autour, environ la moitié de sa hauteur.
- Le bouton lance une connexion et rien d'autre. Ne l'utilisez pas comme lien vers Sporty.