Créer un call to action

Aujourd’hui nous allons apprendre à créer un bouton et modifier son style CSS original avec Bootstrap et CSS3.   Qu’est-ce qu’un « Call to Action » ?   Un « Call to Action » est littéralement un bouton qui appelle à l’action. Nous utilisons ce type de bouton pour définir une action importante comme la transformation d’un article en […]

Posté le par Benoît Philibert|2256 vues

Aujourd’hui nous allons apprendre à créer un bouton et modifier son style CSS original avec Bootstrap et CSS3.


 

Qu’est-ce qu’un « Call to Action » ?

 
Un « Call to Action » est littéralement un bouton qui appelle à l’action. Nous utilisons ce type de bouton pour définir une action importante comme la transformation d’un article en achat avec le bouton « ajouter au panier » ou un bouton inscription ou connexion qui poussent à confirmer une action. Ils sont souvent de couleurs vivent et engageantes comme le rouge, orange, vert ou bleu en fonction du marché et de la cible du site web.
 

Création du bouton

 
On commence avec les choses sérieuses. Dans un premier temps nous devons définir notre balise bouton ainsi que le type attribué à ce dernier :

<button type="button">Ajouter au panier</button>

 
Par la suite, il nous faut définir son style graphique via la CSS de Bootstrap. Je vous conseille fortement de suivre l’exemple de Bootstrap qui vous dirige vers une classe « Primary » pour les boutons primaires sous-entendu « call to action » :

<button type="button" class="btn-primary">Primary</button>

 
Enfin, rajoutez la classe indispensable « btn » qui définie le style par défaut de tout bouton contrairement à « primary » au dessus qui elle définie la couleur du bouton :

<button type="button" class="btn btn-primary">Primary</button>

 
Résultat actuel :

 

Modification de la CSS

 
Créer un fichier « style.css » que vous ajoutez à votre fichier HTML dans la balise « head » comme ceci si votre fichier est enregistré dans le dossier CSS :

<link href="css/style.css" rel="stylesheet">

 
Ouvrez votre fichier « style.css » et commençons par définir la classe « btn-primary » pour votre bouton ainsi que la classe « btn » :

.btn {...}
.btn.btn-primary {...}

Ensuite, dans la classe « btn » nous allons ajouter une animation CSS3 « transition » pour définir un temps de latence entre le changement de couleur au passage de la souris :

.btn {
   -webkit-transition: 0.5s ease;
   -moz-transition: 0.5s;
   -ms-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;
}

Concernant la classe « btn-primary » nous allons changer pas mal de chose :

  • * la couleur
  • * le padding
  • * les bordures
  • * la taille de police
  • * les angles arrondis

 

.btn.btn-primary {
   font-size: 16px; 
   border: 2px solid #f7941d; 
   background:transparent;
   padding:15px 40px; 
   text-transform:uppercase;
   border-radius:30px;
   color:#f7941d;
}

.btn.btn-primary:hover {
    background:#ffb153;
    border-radius:0;
    border: 2px solid #ffb153;
    color:white;
}

Il ne nous reste plus qu’à définir un style différent au passage de la souris en hover. Pour le coup on s’amuse même à enlever les angles arrondis pour un effet supplémentaire!

.btn.btn-primary:hover {
    background:#ffb153;
    border-radius:0;
    border: 2px solid #ffb153;
    color:white;
}

Résultat final de notre bouton :


 


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.