Le bouton "Se Connecter avec HelloAsso"

Afin d'expliciter la création d'une connexion entre HelloAsso et votre système pour les associations, nous vous invitons à intégrer le bouton suivant.

Bouton à intégrer pour initier
la connexion avec HelloAsso

Voici le code du bouton en CSS / Html

<button class="HaAuthorizeButton">
<img src="https://api.helloasso.com/v5/img/logo-ha.svg" alt="" class="HaAuthorizeButtonLogo" />
<span class="HaAuthorizeButtonTitle">Connecter à HelloAsso</span>
</button>
<style>
.HaAuthorizeButton {
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
background-color: #FFFFFF;
border: 0.0625rem solid #4B3FCF;
border-radius: 0.125rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
}
.HaAuthorizeButton:disabled {
background-color: #4B3FCF;
border-color: transparent;
cursor: not-allowed;
}
.HaAuthorizeButton:not(:disabled):focus {
box-shadow: 0 0 0 0.25rem rgba(73, 211, 138, 0.25);
-webkit-box-shadow: 0 0 0 0.25rem rgba(73, 211, 138, 0.25);
}
.HaAuthorizeButtonLogo {
padding: 0 0.8rem;
width: 2.25rem;
}
.HaAuthorizeButtonTitle {
background-color: #4B3FCF;
color: #FFFFFF;
font-size: 1rem;
font-weight: 700;
padding: 0.78125rem 1.5rem;
}
.HaAuthorizeButton:disabled .HaAuthorizeButtonTitle {
background-color: #4B3FCF;
color: #9A9DA8;
}
.HaAuthorizeButton:not(:disabled):hover .HaAuthorizeButtonTitle,
.HaAuthorizeButton:not(:disabled):focus .HaAuthorizeButtonTitle {
background-color: #4B3FCF;
}
</style>