Monetisaction Rentabilisez votre site web

9Jan/190

Créer des boutons en CSS.

Pourquoi créer des boutons en CSS?

Créer des boutons en CSS vous permettra de vous affranchir des images et donc d'améliorer les temps de chargement de vos pages, le rendu étant entièrement généré par votre navigateur. De plus, certains CTA étant bloqués par les bloqueurs de publicités via leur nom de class ou leur URL, celà peut devenir utile. Voici donc quelques étapes simples pour créer des bouton en CSS.

1) Créer des boutons en CSS : le cadre

tout d'abord, ouvrez un petit DIV aux proportions raisonnables (pour être compatible mobile) avec ce code :

<div style="width: 175px; height: 30px; background: orange;">

ce qui devrait créer ce bloc :

 

maintenant, nous allons améliorer légèrement le rendu du cadre en arrondissant les bords avec un attribut border-radius: 7px:

 

puis mettre un dégradé de jaune vers orange avec linear-gradient(180deg, orange, yellow) :

 
 
Pour terminer, vous pouvez ajouter une petite ombre portée avec le paramètre box-shadow: 1.5px 1.5px 10px #888888
 
 

A noter : les couleurs du dégradé sont personnalisables en remplaçant les noms des couleurs ou en insérant directement le code hexadécimal de la couleur voulu. N'oubliez pas le #, exemple avec : linear-gradient(180deg, #00bbd6, #00e5d4) pour obtenir ce rendu :

 

2) Créer des boutons en CSS : le texte

On ajoute ensuite les éléments de personnalisation du texte dans le bouton : taille et type de police, couleur du texte et hauteur de la ligne ainsi que le texte color: grey; font-weight: bold; line-height: 30px; font-size:16px; font-family: verdana; text-align:center;:
 
cliquez-moi
 
Si votre texte est trop long vous pouvez jouer sur la largeur du bouton width: 175px ou la taille du texte font-size:16px; pour ajuster le tout.
 
Créer des boutons en CSS : exemples couleurs et lisibilité

Créer des boutons en CSS : attention au couleurs et à la lisibilité

3) Créer des boutons en CSS : le lien html

Pour terminer, on va ajouter un lien sur l'ensemble du bloc pour que vos visiteurs n'aient pas besoin de cliquer sur le texte mais sur le bloc pour déclencher l'action.

WordPress

Au final, vous devriez arriver à un rendu de ce type avec ce code :

<a href="https://fr.wordpress.org/" target="_blank" rel="nofollow"><div style="cursor: pointer; width: 175px; height: 30px; background: linear-gradient(180deg, orange, yellow); border-radius: 7px; box-shadow: 1.5px 1.5px 10px #888888; color: grey; font-weight: bold; font-size:16px; line-height: 30px; font-family: verdana; text-align:center; ">Wordpress</div></a>
 
Libre à vous d'adapter le code pour changer les couleurs ou la taille des police.
 
Si cet article vous intéresse, vous aimerez aussi :
Héberger une image en HTTPS gratuitement
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Facebook
Facebook
Email this to someone
email

Cet article vous a plu? Parlez en autour de vous...

Posted by Romain

Commentaires (0) Trackbacks (0)

Aucun commentaire pour l'instant


Leave a comment

Aucun trackbacks pour l'instant