Créez simplement des boutons Call to action avec CSS3

Créez simplement des boutons Call to action avec CSS3

Nous avons vu comment personnaliser un menu et le rendre plus dynamique grâce aux transitions.

Etudions cette fois comment créer et décorer des boutons d’appel à l’action, ou Call to action, avec CSS3.

Call to action ?

Un bouton d’appel à l’action, ou Call to action, est un lien, souvent joli et surtout qui attire l’oeil, expliquant clairement les actions que le visiteur peut effectuer.

De préférence, ces actions sont celles que vous aimeriez que le visiteur effectue.

Le texte doit être clair.

Quelques exemples de texte d’appel à l’action :

  • Je m’abonne
  • J’en profite
  • Contactez-nous
  • Demandez un devis personnalisé
  • Réservez dès maintenant

Pour ma part, je préfère employer la deuxième personne du pluriel (ou du singulier) à l’impératif ou la première personne du singulier, et éviter l’infinitif (par exemple : S’abonner).

L’emplacement du Call to action est tout aussi important.

Le style du bouton doit correspondre au style général du site.

Toutefois, comme les goûts et les couleurs ne se disputent pas, l’A/B testing est une technique qui permet de mesurer la conversion (le nombre de clics) pour chaque version de bouton (ou de page, ou de couleur, …).

Le but ici est de voir comment décorer ce bouton pour le rendre attirant.

Un peu d’HTML pour poser les bases

Comme pour le menu, le code HTML du bouton d’appel à l’action doit rester simple et être polluer le moins possible par du code de présentation :

<a href="#" title="Cliquez ici... ou pas">Cliquez ici ?</a>

Ce lien comporte l’URL, la description à afficher quand le visiteur passe le curseur sur le bouton et le texte. On ne peut pas faire plus simple.

Tout va se passer dans le CSS.

Le résultat… un lien, tout simplement :

Les coins arrondis

Un bouton d’appel à l’action qui se respecte, à l’inverse d’un téléviseur, se doit de posséder des coins arrondis. Ou pas.

CSS permet d’arrondir les angles avec la propriété border-radius, angle par angle.

D’ailleurs il est possible de faire beaucoup de choses avec les coins arrondis :

Créez simplement des boutons Call to action avec CSS3 : Cutes Animals, démo technique des border-radius
Cute Animals, démo technique des border-radius
Revenons à nos, euh… boutons.

Voilà le code que nous utiliserons dans notre bouton :

.ctaButton {
  border-radius: 0.5em 0.5em 0.5em 0.5em;
}

Ajout d’une ombre

Un autre effet sexy pour notre bouton est d’ajouter une ombre.

Ajoutons cette propriété, toujours dans la classe ctaButton :

.ctaButton {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

Quelques autres améliorations

Enfin, ajoutons quelques propriétés plus ‘CSS2’ pour finir de décorer notre bouton : transformer le texte en majuscules, enlever le souligné du lien, changer la police, sa taille et son style.

Notez aussi que display: inline-block permet de définir les propriétés padding et margin du lien.

Le code complet de la classe ctaButton :

.ctaButton {
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  display: inline-block;
  font-family: tahoma,arial,helvetica,sans-serif;
  font-size: 11px;
  font-weight: bold;
  margin-top: 12px;
  padding: 7px 9px;
  text-decoration: none;
  text-transform: uppercase;
}

Le bouton modifié, pour indiquer la classe :

<a class="ctaButton" href="#" title="Cliquez ici... ou pas">Cliquez ici !</a>

Le résultat :

Texte supplémentaire et le sélecteur :after

Parlons maintenant de sélecteur, en utilisant :after. Dans notre cas, il permet d’ajouter automatiquement du texte après le texte du bouton, comme par exemple un > :

.ctaButton:after {
  content: " > ";
}

Le résultat :

Un peu de couleur avec un dégradé

Créons une nouvelle classe pour ajouter de la couleur à notre bouton. Et tant qu’à ajouter de la couleur, autant la rendre encore plus sexy avec un dégradé.

.green {
  background-color: #8EAF53;
  background: linear-gradient(center top , #8EAF53, #799E3C) repeat scroll 0 0 transparent;
  background: -moz-linear-gradient(center top , #8EAF53, #799E3C) repeat scroll 0 0 transparent;
  background: -webkit-linear-gradient(center top , #8EAF53, #799E3C) repeat scroll 0 0 transparent;
  border: 1px solid #619C33;
  color: #FFF;
}

La ligne commençant par background: linear-gradient est la principale. Les autres ne sont là que pour assurer la compatibilité avec les autres navigateurs, où il faut recopier les mêmes paramètres.

Les paramètres de linear-gradient indiquent que le dégradé commence en haut au centre avec la couleur RGB hexadécimale #8EAF53 vers l’opposé avec la couleur #799E3C. En gros, on passe d’un vert à un autre vert.

La définition background-color: #8EAF53 permet de définir une couleur unie pour les navigateurs ne supportant définitivement pas les dégradés, comme Internet Explorer 7, 8 et 9.

Pour encore améliorer notre bouton, une bordure est ajoutée avec un vert un peu plus foncé.

Le code HTML, utilisant la classe green, qu’il est nécessaire d’additionner avec la classe ctaButton pour conserver les propriétés définies plus haut :

<a class="ctaButton" href="#" title="Cliquez ici... ou pas">Cliquez ici</a>
<a class="ctaButton green" href="#" title="Cliquez ici pour profiter de nos extraodinaires offres">Je profite</a>

Le résultat :

Le dégradé avec le sélecteur :hover

Pour ajouter un peu de dynamisme, il suffit d’utiliser le sélecteur :hover pour définir un autre dégradé sur le bouton au moment où le visiteur passe le curseur de sa souris sur celui-ci.

L’astuce ici est d’inverser les couleurs dans les paramètres de linear-gradient et de changer la couleur de la propriété background-color nécessaire à Internet Explorer.

.green:hover {
  background-color: #799E3C;
  background: linear-gradient(center top , #799E3C, #8EAF53) repeat scroll 0 0 transparent;
  background: -moz-linear-gradient(center top , #799E3C, #8EAF53) repeat scroll 0 0 transparent;
  background: -webkit-linear-gradient(center top , #799E3C, #8EAF53) repeat scroll 0 0 transparent;
  border: 1px solid #619C33;
  color: #FFF;
}

Le résultat :

Un exemple, avec une autre couleur

L’intérêt de définir les couleurs du dégradé dans une autre classe que ctaButton est de pouvoir définir d’autres classes avec d’autres couleurs, en profitant toujours des bases définies dans ctaButton (les coins arrondis, l’ombre, …).

Ainsi, pour créer un nouveau bouton avec un dégradé orange :

.orange {
  background-color: #FFCC80;
  background: linear-gradient(center top , #FFCC80, #FFB580) repeat scroll 0 0 transparent;
  background: -moz-linear-gradient(center top , #FFCC80, #FFB580) repeat scroll 0 0 transparent;
  background: -webkit-linear-gradient(center top , #FFCC80, #FFB580) repeat scroll 0 0 transparent;
  border: 1px solid #FFB380;
  color: #FFF;
}
.orange:hover {
  background-color: #FFB580;
  background: linear-gradient(center top , #FFB580, #FFCC80) repeat scroll 0 0 transparent;
  background: -moz-linear-gradient(center top , #FFB580, #FFCC80) repeat scroll 0 0 transparent;
  background: -webkit-linear-gradient(center top , #FFB580, #FFCC80) repeat scroll 0 0 transparent;
  border: 1px solid #FFB380;
  color: #FFF;
}

D’ailleurs, si vous voulez éviter de démarrer votre éditeur d’images, plusieurs outils en ligne gratuit permettent de choisir des couleurs pour faire un dégradé et de voir le résultat.

Le code HTML :

<a href="#" title="Cliquez ici... ou pas">Cliquez ici</a>
<a href="#" title="Cliquez ici pour profiter de nos extraodinaires offres">Je profite</a>
<a href="#" title="Cliquez ici pour profiter vous abonner à notre newsletter">Je m'abonne</a>

Le résultat :

Le mot de la fin

Nous avons vu comment rendre un bouton Call to action attrayant, mais gardez bien en mémoire que son emplacement et son texte sont tout aussi importants.

En bonus, si comme moi vous vous demandiez à quoi ils pouvaient bien ressembler :

Créez simplement des boutons Call to action avec CSS3 : les Cute Animals sans border-radius
Les Cute Animals sans border-radius

Ils sont toujours aussi cutes non ?

Cet article vous a été utile ? Partage it !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.