10 solutions pour avoir de beaux boutons d’actions

Les boutons d’actions jouent un rôle prépondérant dans le taux de conversion d’un site e-commerce. Entre un bouton gris tout petit et peu contrasté et un grand bouton incitatif le taux de conversion peut varier de façon spectaculaire.

Un bouton on ne peut plus simple

Une des bases de l’A/B testing est de jouer avec les tailles, les intitulés et les couleurs des call to actions (l’autre nom des boutons d’actions)  pour toujours optimiser le taux de clic. Voici donc 10 ressources pour trouver de l’inspiration ou des conseils pour optimiser ses boutons d’actions web.

1) Super Awesome Buttons with CSS3 and RGBA

Cet article (en anglais) vous permet de créer de superbes boutons d’actions en CSS3 avec le code détaillé, des exemples de couleurs et de fonds et toutes les informations necessaires pour l’adapter à votre site. Un vrai tutorial complet à consulter régulièrement.

Cliquez sur l'image pour lire l'article

2) ButtonBoost

ButtonBoost est un petit webservice permettant de vous créer un bouton répondant exactement à vos besoins mais sans connaissances graphiques particulières (pas besoin de photoshop).

Il faut obligatoirement s’enregistrer pour télécharger son bouton mais pas pour jouer avec l’outil. Attention il est possible de faire des trucs très moches également…

Cliquez sur l'image pour accéder au site

3)AsButtonGenerator

Un beau générateur de boutons qui monte au maximum à 600*200pixels, ce qui est peut être un peu gros pour un bouton « ajouter au panier » mais bon si vous voulez tester au moins vous pouvez.

Très simple, l’interface bien pensée ne devrait pas vous poser de problème pour obtenir quelque chose de sympa rapidement. Et en plus il n’y a pas besoin de s’enregistrer pour récupérer son travail.

Cliquez pour accéder au générateur

4) ButtonMaker

ButtonMaker est un peu spécial, ce n’est pas un générateur de bouton image mais au contraire de bouton CSS. Le principe est simple : vous générez la css de votre bouton et l’appliquez après sur votre site ou vous voulez.

Très simple à utiliser il permet réellement, grâce aux css, de pouvoir mettre en places des tests régulièrement (sur l’impact des couleurs par exemple) en toute simplicité.

Cliquez sur l'image pour accéder au site

 5) 10 Awesome CSS3 Buttons to use on your website

Le titre est assez clair je pense et explique bien ce que vous allez trouver à l’intérieur de l’article (en anglais), 10 boutons simple à créer en CSS, avec le code fournit. Principalement axé sur le travail des couleurs cela fait une bonne base de travail pour commencer à se former aux boutons d’actions.

Cliquez sur l'image pour lire l'article

6) Sexy CSS over Button

Encore un article en anglais mais cette fois sur la création d’un effet au survol d’un bouton d’action, pratique pour mettre le focus sur l’action en cours ! Il vous faudra votre logiciel de création d’images préféré , le tutorial étant avec Photoshop bien sûr.

Attention cet article demande un peu de connaissance CSS et surtout de création graphique, les images de bases n’étant pas fournies.

Cliquez sur l'image pour lire l'article

7) Un générateur de boutons pour applications Iphone

Si vous avez un site E-commerce vous avez peut être en projet de développer une version mobile, voire une application pour les webphones. Voici donc un kit pour générer des boutons plus sympa pour votre application.

Il vous faudra des connaissances de programmation Iphone pour utilisez le kit, ceci n’étant pas mon cas je n’ai pas pu tester l’application.

Cliquez pour accéder au kit

8 ) Tutoriel sur les boutons CSS en français

Dans toute cette sélection anglaise voici une petite pointe de français avec un cours de débutant sur la création de boutons en CSS. Indispensable pour comprendre les bases.

Au menu ? Bouton simple, bouton en relief, les menus. Tout ça avec les codes html et css qui vont bien.

Cliquez pour lire l'article (en français)

9) 60 ressources pour trouver le bon design de bouton d’action

Si le code et le graphisme ce n’est pas votre truc alors le lien ci dessous est fait pour vous : 60 liens vers des ressources proposant des boutons déjà désignés. Il y en a pour tous les goûts : E-commerce, classique, glossy, technique, Apple etc…  il y a plusieurs milliers de boutons accessibles vous devriez donc pouvoir choisir celui le plus adapté à vos besoins.

La plupart sont également disponibles au format PSD et donc éditables avec Photoshop si besoin.

Cliquez sur l'image pour accéder à l'article

10) Beautiful CSS buttons with icon set

Vous souhaitez ajouter des icônes à vos boutons d’actions ? Cela peut permettre de mieux cerner leur fonction ou de les rendre plus visible c’est donc une bonne idée ! Si vous ne savez pas comment vous y prendre il suffit de suivre le tutoriel (en anglais) ci dessous et de choisir les icônes les plus adaptées à vos call to actions.

Cliquez sur l'image pour lire le tutoriel

Et voila donc 10 ressources pour vous aider à avoir de beaux call-to-action sexy et sympa. Si vous connaissez d’autres ressources intéressantes n’hésitez pas à utiliser les commentaires !