Conseils pratiques pour créer vos boutons site web attractifs

 

Un bouton site web est un lien qui ne contient pas de texte mais plutôt des images et des styles CSS. De petite taille, il est plus utilisé pour le sponsoring de rubrique ou de partenariat à long-terme.

De fait, il existe plusieurs types de boutons site web selon la méthode de création, notamment en utilisant des images, un CSS ou bien des sites en ligne.

I – Création bouton site web par l’utilisation d’images :

Tout d’abord, cette méthode présente l’avantage que votre bouton site web restera le même dans tous les navigateurs puisqu’il gardera le même design.

Concrètement, il s’agit ici de créer dans un premier temps l’image que vous allez utilisez pour votre bouton site web pour ensuite utiliser le CSS afin de mettre l’image en arrière plan du lien.

Ainsi pour la création de l’image de l’arrière plan de votre bouton site web, vous pouvez soit recourir au Photoshop soit au Photofiltre.

Le Photoshop est incontestablement le plus utilisé pour la création de bouton site web car c’est un moyen efficace et surtout très rapide (entre 5 et 10 minutes).

Pour insérer le logo dans la page de votre site web, utilisez la méthode CSS pour afficher votre bouton CSS.

Code HTML : [html]<a href= »http://bit.ly/rfxbTz » class= »bouton »></a>[/html]

Code CSS : css] .bouton

{ width:180px; //pour définir la largeur (utilisez la même largeur que l’image background:url(LE-LIEN-VERS/VOTRE-IMAGE.png) center no-repeat; //pour définir l’arrière plan de votre bouton

height:40px; //pour définir la hauteur
display:block; // indispensable pour dire que le <a> doit être cliquable dans tous les côtés du bouton }[/css]

II – Création bouton site-web par l’utilisation d’un CSS :

La méthode CSS est très utilisée à son tour, notamment par les « grands » comme Youtube, Google, Facebook, Twitter … etc.

Utilisez ce code HTML :

[css].bouton {
border-top: 1px solid #f79797; //pour ajouter une bordure en haut
background: #f00000; //pour changer l’arrière plan
padding: 6px 12px; //pour ajouter un espace intérieur dans le bouton
-webkit-border-radius: 8px; //pour créer des bordures rondus (navigateur : Google Chrome et d’autres)
-moz-border-radius: 8px; //pour créer des bordures rondus (navigateur : FireFox et d’autres)
border-radius: 8px; //pour créer des bordures rondus (navigateur : La plupart)
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; //pour ajouter un ombre en dessous du bouton (navigateur : Google Chrome et d’autres)
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0; // pour ajouter un ombre en dessous du bouton (navigateur : Google Chrome et d’autres)
box-shadow: rgba(0,0,0,1) 0 1px 0; // pour ajouter un ombre en dessous du bouton
text-shadow: rgba(0,0,0,.4) 0 1px 0; // pour ajouter un ombre en dessous du bouton
color: white; // la couleur
font-size: 21px; // la taille du font
font-family: Georgia, serif; // pour définir la police
text-decoration: none; // pour enlever le souligné
vertical-align: middle; // pour centrer le texte
}
.bouton:hover { // les propriétés du bouton si vous placez la souris sur ce dernier
border-top-color: #ff0000;
background: #ff0000;
color: #f0f0f0;
}[/css]

Ce code est modifiable selon votre propre conception, notamment la couleur de l’arrière plan, l’effet d’ombre du texte ainsi que les bordures.

III – Création bouton site web par l’utilisation de sites en ligne :

Cette méthode de création de bouton site web s’avère très pratique car elle est la plus facile et la plus utilisée par les personnes qui n’ont pas de connaissances en matière de création de site web. Néanmoins, cette méthode à l’inconvénient de na pas offrir le choix pour la création de votre bouton site web selon votre « guise », car en effet le site en question vous « impose » des thèmes très précis.
Parmi ces sites en ligne de création de bouton site web, on peut citer principalement, Da Button Factory ou encore Button Maker qui génère des CSS pour la création de vos boutons site web.

Ceci dit, il existe d’autres méthodes de création de bouton site web comme le flash et le Javascript mais ces dernières ne sont pas compatibles pour les smartphones.

Add a Comment

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