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 !

Commentaires

4 réponses à “10 solutions pour avoir de beaux boutons d’actions”

  1. Avatar de Jonathan - alineowebdesign
    Jonathan – alineowebdesign

    Merci pour l’article, très utile ces petits boutons, surtout en CSS3 😀

  2. Avatar de Benoit Gaillat
    Benoit Gaillat

    De rien ! on a toujours besoin de tester de nouveaux call to action je trouve.

  3. Avatar de lefevre
    lefevre

    Merci aussi pour l’article, mais le lien « sexy button » ne fonctionne pas …

  4. Avatar de Benoit@ecommerce

    Oups désolé je n’ai pas modifié le lien, je corrige ça rapidement

Laisser un commentaire

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

  • Magento Commerce, Le Guide complet de la solution
    Aujourd’hui, face à la pression croissante du marché des e-commerces, les entreprises cherchent des solutions leur permettant de générer plus de revenus et d’améliorer l’expérience client. le CMS Magento est une plateforme de commerce électronique extrêmement puissante qui offre un large catalogue de fonctionnalités avancées pour les commerçants souhaitant se démarquer. Dans cet article, nous […]
  • Les documents officiels d’une entreprise en France
    Lorsqu’on décide de créer une entreprise en France, il est important de savoir que cela nécessite certaines formalités administratives. En effet, il est obligatoire de fournir certains documents officiels pour pouvoir immatriculer sa société. Dans cet article, nous allons vous expliquer les différentes démarches à réaliser pour créer votre entreprise, ainsi que les documents officiels […]
  • C’est quoi le motion design ?
    Ont dit souvent qu’une image vaut mille mots. Mais alors que dire d’une animation ? Du mouvement, des graphiques et des images animées : la combinaison parfaite pour créer un projet unique et expliquer n’importe quel sujet. C’est ça le motion design. Pourquoi devriez vous introduire le Motion Design dans votre arsenal de techniques de […]
  • Comment créer une boutique en ligne avec succès ?
    Face à l’explosion des ventes en ligne et de la création de nouvelles boutiques chaque jour, la question qui se pose est : comment créer une boutique en ligne avec succès ? En effet créer sa propre entreprise sur internet ne nécessite pas forcément d’importants investissements mais demande par contre quelques bonnes connaissances. Il faut […]
  • Logistique : pourquoi et comment travailler dans ce secteur ?
    La logistique désigne l’ensemble des activités qui permettent de planifier, d’organiser, de contrôler et d’exécuter les opérations liées à la gestion des flux de biens et de services. Elle englobe plusieurs étapes dont les principales sont le transport, le stockage, la manutention, la distribution, le conditionnement et le traitement des retours. En raison de son […]
  • Semrush : la solution pour maitriser de A à Z son SEO
    Si vous faites du e-commerce, voir même si vous êtes « juste » éditeur de site web ou webmaster, vous avez certainement touché un peu au SEO, le référencement naturel. Que ce soit vous même ou avec l’aide d’une agence SEO , ce canal d’acquisition est devenu réellement indispensable au fur et à mesure des années. Indispensable […]
  • Big Commerce augmente (lui aussi) ses tarifs !
    C’est une réaction qui fait peu de surprises dans le monde de l’e-commerce mais qui ne va quand même pas plaire aux principaux intéressés. BigCommerce, une des solutions concurrente à Shopify, Prestashop, Wizishop et autre, annonce que ses prix vont se voire augmenter dès maintenant pour tous ses marchands. Pourquoi ce n’est une surprise pour […]
  • Play To Earn (P2E) : définition et fonctionnement
    L’univers du gaming connaît une grande révolution depuis quelque temps. On observe une montée en puissance des jeux qui donnent la possibilité de gagner de l’argent en s’amusant. Parmi les jeux qui ont le vent en poupe actuellement, on retrouve le Play to Earn. Plus connu sous l’abréviation P2E, le Play to Earn est ce […]
  • NFT : définition et objectif
    Pour ceux qui sont familiers à la cryptomonnaie, il est facile d’adopter le NFT et son mode de fonctionnement. Cette technologie est répandue depuis 2021. Elle est avantageuse aux artistes, aux joueurs de jeux vidéo et à divers investisseurs. Elle a plusieurs objectifs qui visent à améliorer l’environnement de la crypto technologie. Les amateurs de […]
  • NFT : Les Top 10 les plus chers
    L’année 2021 a connu une croissance massive de la technologie blockchain et des crypto-monnaies. Ce phénomène a été observé au niveau du capital du marché et du développement des différentes infrastructures en rapport avec ces deux domaines. La montée en flèche des Jetons Non Fongibles (NFT) a attiré l’attention suite aux ventes historiques enregistrées sur […]
  • Comment créer et vendre un NFT ?
    Le NFT signifie en anglais ‘’Non Fungible Token’’ et en français ‘’Jeton Non Fongible’’. Il s’agit d’un bien numérique non irremplaçable par un autre, ce qui n’est pas le cas avec les billets d’argent. Il se décline en plusieurs formes dont les tweets, œuvres d’art numériques et noms de domaines. Ces derniers sont achetés par […]
  • Quelles cryptomonnaies risquent d’exploser d’ici 2025 ?
    Alternatives aux monnaies émises par les banques pour certains, outils de spéculation pour d’autres, les cryptomonnaies sont devenues en peu de temps une technologie omniprésente dans notre quotidien. Entre 2020 et 2021, Bitcoin a atteint des chiffres record. Des personnes qui avaient fait l’acquisition de cette monnaie plus tôt se sont retrouvées du jour au […]
  • Akeneo : Le PIM qui est en train de conquérir le E-commerce
    Aujourd’hui, nous nous retrouvons face à un monde constamment connecté, qui exige une gestion optimale des informations et une expérience produit de qualité. Surtout dans un monde Omnicanal. Pour répondre à ces besoins en constante évolution, il est souvent nécessaire de centraliser les informations produits au sein d’une même interface afin de les diffuser de […]
  • NFT : Pourquoi les acheteurs dépensent-ils des millions ?
    Sur internet ou ailleurs, vous avez certainement entendu parler des NFT. Ce sont des images qui peuvent paraitres banales mais dont le prix de vente atteint facilement des sommes à 7 chiffres. Les frais des transactions concernant les NFT sont tout aussi impressionnants. Nombreux sont ceux qui ne comprennent pas comment ce système fonctionne. Pourtant, […]
  • Avis Wizishop : Que penser de Wizishop en 2023 ?
    Explorer Wizishop : Avis clients et engagements offerts pour la création de boutiques en ligne Face à l’explosion de l’activité et des besoins en matière de commerce en ligne, Wizishop s’est imposé ces dernières années comme une solution française complète pour la création de boutiques en ligne et la vente de produits. Mais avant de […]
  • Play To Earn (P2E) : Lesquels sont les meilleurs ?
    Les cryptos de la blockchain gaming ont révolutionné l’univers vidéoludique et sont désormais les options du moment. Ce qui a favorisé la mise en place des jeux Play To Earn (P2E). En fonction des performances affichées par chaque joueur, ceux-ci obtiennent des récompenses en crypto-monnaie et en NFT. Pour s’offrir des expériences de jeu Play […]
  • Quelles sont les meilleures plateformes d’échange de Cryptomonnaie ?
    La crypto-monnaie est un système de paiement numérique devenu populaire en 2022. Des plateformes ont été créées pour faciliter les échanges dans l’univers de la cryptomonnaie. Appelées plateformes de crypto monnaies ou échange crypto, les plateformes d’échanges ou exchanges sont des marchés centralisés. Elles permettent aux utilisateurs de faire du trading, d’acheter et de vendre […]
  • Shopify Winter édition propose plus de 100 nouveautés !
    C’est la deuxième fois déjà que Shopify nous propose un « pack » de nouvelles fonctionnalités pour optimiser et booster son site e-commerce. La première fois, c’était en été 2022 avec la Shopify summer Edition. Cet hiver, Shopify remet le couvert avec la winter édition et nous propose plus de 100 nouveautés à venir profiter directement, sans […]
  • Où trouver les meilleures informations sur les Cryptomonnaie ?
    Le secteur de la crypto-monnaie fait partie des plus évolutifs. Il souffre du manque de stabilité lié à cette devise elle-même. La diversité des crypto-monnaies n’est pas sans conséquence face à cette instabilité. Le cours du bitcoin peut atteindre des sommets aujourd’hui, le lendemain, c’est Ethereum qui chute. Il ne faut pas oublier que les […]
  • Monitoring site web, comment faire et pourquoi ?
    Vous avez un site internet ou un site e-commerce et vous cherchez à savoir si il est en ligne suffisamment longtemps, si il n’y a pas de coupure ou si l’hébergement tient la charge ? Alors il vous faut un outil de monitoring de site ! Que votre site soit un site e-commerce, un site […]
  • Headless, tout comprendre de ce nouveau phénomène
    Vous avez entendu parler de « Headless » mais le terme ne vous revient pas ? Vous ne savez pas comment définir le headless ni ses avantages et ses inconvénients ? Difficile donc de savoir si le headless e-commerce est fait pour vous ?Alors voici toutes les explications et détails pour comprendre de A à Z ce […]