WooCommerce Button Border Colour and Hover Status Design Tips (en anglais)

WooCommerce La conception des boutons d'un site web influe directement sur le comportement d'achat des utilisateurs. Dans cet article, nous allons vous montrer comment modifier la couleur de la bordure du bouton et l'effet de survol, afin que les boutons "ajouter au panier", "acheter maintenant" et d'autres boutons clés attirent davantage l'attention, de manière à améliorer le taux de clics et le taux de conversion. La méthode est simple, l'effet est remarquable.

I. Pourquoi la conception des boutons est-elle si importante ?

Les boutons sont la clé de la conversion des utilisateurs sur les sites de commerce électronique. Dans WooCommerce, un bouton bien conçu peut augmenter de manière significative le taux d'achat. Dans cet article, nous allons nous concentrer sur les deux astuces les plus pratiques d'optimisation des boutons : ajuster la "couleur de la bordure" et "l'état de survol" pour rendre votre bouton d'achat plus attrayant pour les clients.

WooCommerce boutonsConseils pour la conception des couleurs des bordures

1. Choisir la bonne couleur pour contraster avec l'arrière-plan

La couleur de la bordure du bouton doit contraster avec la couleur de l'arrière-plan pour que le bouton soit clairement visible. Par exemple, une bordure foncée (noire ou gris foncé) convient aux boutons sur fond blanc, tandis qu'une bordure claire (blanche ou gris clair) convient à un fond foncé. Cela permet au bouton de mieux ressortir sur la page et d'attirer l'attention de l'utilisateur.

Recommandations en matière de conception :

• Fond sombre : Utilisez des bordures claires (par exemple, blanc, gris) ou des couleurs vives (par exemple, bleu, vert).
• Fond clair : Utilisez des bordures foncées (par exemple, noir, gris foncé) pour renforcer le contraste.

2. Utiliser les couleurs de la marque pour unifier la conception

Pour assurer la cohérence de votre site web, la couleur de la bordure du bouton peut correspondre à la couleur principale de votre marque. Par exemple, si la couleur de votre marque est le bleu, la bordure du bouton peut également avoir un effet de dégradé bleu ou bleu pour augmenter la reconnaissance visuelle de votre marque.

Recommandations en matière de conception :

• Correspondance des couleurs de la marque : Utilisez la couleur principale de la marque comme couleur de bordure du bouton (par exemple, bleu, rouge, vert, etc.).
• Effet de gradient : L'utilisation d'une bordure de couleur dégradée peut donner aux boutons un aspect plus moderne et dynamique.

3. Effet de bordure dynamique

Outre les couleurs de bordure statiques, les effets de bordure dynamiques, tels que le changement de couleur de la bordure au passage de la souris, peuvent enrichir l'expérience de l'utilisateur. Ces effets peuvent être mis en œuvre au moyen d'animations ou de transitions CSS afin de rendre les boutons plus visibles lors de l'interaction avec l'utilisateur.

Recommandations en matière de conception :

• Changement de couleur de la bordure au survol de la souris : faire passer (un projet de loi, une inspection, etc.) CSS (utilisé comme expression nominale) transition pour obtenir une transition en douceur de la couleur de la bordure et améliorer l'interactivité du bouton.
• Variation de l'épaisseur de la lunette : L'épaisseur de la bordure peut être modifiée lorsque la souris survole le bouton, ce qui augmente l'effet visuel et donne au bouton un aspect plus stratifié.

button:hover {
    border-colour : #ff6f61 ;
    transition : border-color 0.3s ease ;
}

4. Coins arrondis combinés à une bordure

La combinaison de couleurs de bordures et de coins arrondis peut donner aux boutons un aspect plus doux et plus facile à cliquer. Les boutons aux coins arrondis sont généralement plus accessibles que les boutons droits, ce qui peut inciter l'utilisateur à cliquer dessus.

Recommandations en matière de conception :

• Bords arrondis : utiliser rayon de la bordure ajoute un effet de coin arrondi aux boutons. Des coins arrondis plus petits (par exemple 5px) conviennent aux boutons normaux, tandis que des coins arrondis plus grands (par exemple 15px) conviennent mieux aux boutons de style moderne.

bouton {
    border-radius : 5px ; border : 2px solid #007bff ;
    border : 2px solid #007bff ;
}

Trois,WooCommerce Conseils de conception pour l'état de survol des boutons

1. Changement de couleur de l'état de survol

La couleur du bouton doit changer lorsque l'utilisateur passe la souris dessus afin de fournir un retour d'information visuel. Les modifications de l'état de survol peuvent inclure la couleur d'arrière-plan, la couleur de la bordure, la couleur du texte, etc. afin de renforcer la nature incitative du bouton.

Recommandations en matière de conception :

• Changement de couleur de l'arrière-plan : Utilisez des nuances de couleur pour souligner l'interactivité du bouton. Par exemple, la couleur d'arrière-plan passe du bleu clair au bleu foncé, ou la couleur d'arrière-plan s'assombrit progressivement.
• Changement de couleur du texte : Lorsque la couleur de l'arrière-plan change, vous pouvez ajuster la couleur du texte pour créer un contraste plus net avec l'arrière-plan et faire ressortir davantage le texte.

button:hover {
    couleur de fond : #0056b3 ;
    couleur : #fff ;
}

2. effet de zoom

Une autre façon d'améliorer l'interactivité d'un bouton est d'ajouter un effet de zoom au bouton lorsque la souris le survole. En zoomant légèrement sur le bouton, l'utilisateur peut ressentir un retour d'information plus fort lorsqu'il clique.

Recommandations en matière de conception :

• Amplifier l'effet : utiliser transformer pour zoomer sur les boutons lorsqu'ils sont survolés, et via l'attribut transition Des transitions en douceur.

button:hover {
    transform : scale(1.05) ;
    transition : transform 0.2s ease-in-out ;
}

Le code ci-dessus peut être ajouté via le code CSS personnalisé de WordPress (pour tous les thèmes)

• Connectez-vous à WordPress En coulisses.
• entrer dans état extérieur → personnalisation.

• Dans le panneau de personnalisation, sélectionnez CSS supplémentaire.

IV. résumé et recommandations

Grâce à une conception rationnelle WooCommerce La couleur de la bordure et l'état de survol d'un bouton peuvent améliorer la possibilité de cliquer et l'expérience de l'utilisateur. Voici quelques conseils :

• Contraste de couleur de la bordureLes boutons doivent être bien contrastés par rapport à la couleur d'arrière-plan.
• couleur de la marqueLes couleurs de la marque : utiliser les couleurs de la marque pour assurer la cohérence visuelle.
• État du survolLes effets de couleur et de zoom sont ajoutés au survol afin d'améliorer l'interactivité.
• Coin arrondiLes coins et les bords arrondis sont combinés pour plus d'intimité.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.