Styliser un CTA dans HubSpot

1. Créer le CTA

Aller dans Marketing > Captures de leads > CTA

 

Puis cliquer sur Créer un CTA

 

2. Créer le style du bouton à l'état normal

Contenu de texte : texte qui apparaitra dans votre bouton

Style de bouton :

  • choisir lien pour du texte cliquable de ce type Link
  • choisir simple pour un format de bouton avec une couleur de fond

Ici nous choisirons simple

Couleur du bouton : rentrer la couleur hexadécimal de votre bouton

 

3. Personnaliser l'état normal du bouton

  1. Ouvrir le dropdown Option avancées
  2. Changer les valeurs de remplissages du bouton selon vos convenances. Il s'agit de l'espace entre le texte et le bord du bouton ou nommé padding en css.
  3. Ajouter une classe au bouton. Pour cela taper le nom de votre classe dans l'espace classe css personnalisée
    Ici je nomme ma classe custom-button
  4. Appeler votre classe dans l'espace CSS personnalisé puis ajouter les propriétés voulues en ajoutant !important à chaque ligne.
.custom-button {
border-radius: 30px !important; // modifie l'arrondi de chaque angle
border: 2px solid #07AEB3 !important; // ajoute une ligne pleine de 2px autour du bouton
letter-spacing: 1px !important; // ajoute de l'espace entre chaque caractère du texte contenu dans le bouton
}
 

4. Styliser l'état au survol

  1. Toujours dans l'espace CSS personnalisé, appeler de nouveau la classe que vous avez créé mais suivi de :hover . Ce terme spécifie l'état de survol du l'élément.
  2. Ajouter les propriétés que vous voulez changer lors de cet état. Ici je souhaite avoir un fond blanc, garder la bordure bleu et que le texte soit bleu
.custom-button:hover {
background-color: white !important;
color: #07AEB3 !important;
}
 

Vous savez maintenant styliser un CTA