Le système de boutons de Scale Theme avec 3 styles distincts, 6 effets hover spectaculaires, presets de décoration et une personnalisation complète du rayon, espacement et bordure.
Système de boutons
Les boutons sont les éléments les plus importants de votre boutique. Ce sont eux qui transforment un visiteur en client. Scale Theme propose un système de boutons extremement flexible avec 3 styles distincts, 6 effets hover, des presets de décoration, et un contrôle fin sur chaque détail visuel. Le tout se configure globalement : changez un réglage, et tous les boutons de votre boutique se mettent à jour.
Les 3 styles de boutons
Chaque section qui utilise un bouton vous laisse choisir parmi 3 styles. Chaque style a sa propre combinaison de couleurs et son propre rôle dans la hiérarchie visuelle.
| Style | Rôle | Couleur par défaut | Utilisation typique |
|---|---|---|---|
| Style 1 | CTA principal, le plus visible | Fond Accent 1 | "Ajouter au panier", "Acheter maintenant", "S'inscrire" |
| Style 2 | CTA secondaire, alternatif | Fond Accent 2 | "En savoir plus", "Voir la collection", "Comparer" |
| Style 3 | CTA discret, action tertiaire | Transparent | "Voir tout", liens texte, navigation |
Couleurs des boutons
Chaque style a sa propre configuration de couleur fond/texte. Vous pouvez personnaliser ces couleurs dans Paramètres du thème > Boutons.
| Style | Couleur de fond | Options | Couleur du texte | Options |
|---|---|---|---|---|
| Style 1 | Accent 1 (défaut) | Accent 1 / Accent 2 / Text / Transparent | Background (défaut) | Background / Foreground / Accent 1 / Accent 2 |
| Style 2 | Accent 2 (défaut) | Accent 1 / Accent 2 / Text / Transparent | Background (défaut) | Background / Foreground / Accent 1 / Accent 2 |
| Style 3 | Transparent (défaut) | Accent 1 / Accent 2 / Text / Transparent | Background (défaut) | Background / Foreground / Accent 1 / Accent 2 |
Réglages globaux de forme
Ces réglages s'appliquent a TOUS les boutons de votre boutique, quel que soit le style.
Police
| Réglage | Options | Défaut |
|---|---|---|
| Police | Heading / Body | Heading |
| Taille de police | 80% a 130% | 100% |
| Gras | Oui / Non | Oui |
La police Heading (titres) donne des boutons plus imposants et autoritaires. La police Body (corps) donne des boutons plus discrets et naturels.
Border radius (rayon des coins)
Le border radius définit la forme des coins du bouton. C'est l'un des réglages qui impacte le plus l'identité visuelle.
| Valeur | Apparence | Impression | Idéal pour |
|---|---|---|---|
| 0 px | Carre, coins droits | Moderne, architecturale, edgy | Boutiques tech, design minimaliste, mode streetwear |
| 4-8 px | Legerement arrondi | Professionnel, accessible | La plupart des boutiques, usage général |
| 10-20 px | Arrondi | Amical, approchable, doux | Boutiques alimentation, beauté, enfants |
| 30-50 px | Tres arrondi | Ludique, moderne, startup | Apps, SaaS, boutiques tendance |
| 100 px | Pilule / capsule | Fun, app mobile, call-to-action fort | Boutiques jeunes, mode, lifestyle |
Espacement (Spacing)
L'espacement contrôle la quantité de "respiration" autour du texte du bouton.
| Réglage | Range | Défaut | Impact |
|---|---|---|---|
| Spacing horizontal | 4-40 px | 16 px | Largeur du bouton (gauche/droite du texte) |
| Spacing vertical | 4-40 px | 4 px | Hauteur du bouton (dessus/dessous du texte) |
Bordure
| Réglage | Options | Défaut |
|---|---|---|
| Afficher la bordure | Oui / Non | Non |
| Epaisseur | 1-5 px | 1 px |
| Couleur de bordure | Darker / Lighter / Text / Subtle | Darker |
| Couleur bordure | Description | Effet visuel |
|---|---|---|
| Darker | Version plus sombre du fond du bouton | Bordure subtile, presque invisible, ajoute de la profondeur |
| Lighter | Version plus claire du fond du bouton | Effet "highlight", utile sur fond sombre |
| Text | Couleur du texte de la palette | Bordure bien visible, contrastee |
| Subtle | Couleur du texte a faible opacité | Bordure tres discrete, juste une suggestion |
Les 6 effets hover
L'effet hover est ce qui se passe quand un visiteur survole un bouton avec sa souris. C'est un moment crucial : un bon effet hover confirme que le bouton est cliquable et encourage l'action.
| Effet | Intensité | Mobile | Description | Recommande pour |
|---|---|---|---|---|
| Darker | Subtile | Oui (tap) | Le fond s'assombrit légèrement | Usage général |
| Lighter | Subtile | Oui (tap) | Le fond s'eclaircit | Ambiance douce, bien-être, beauté |
| Fill Slide | Forte | Oui (tap) | Couleur qui "glisse" depuis le bas | CTA principaux, "Ajouter au panier" |
| Scale | Moyenne | Oui (tap) | Le bouton grossit légèrement (105%) | Ambiance fun, enfants, alimentation |
| Paint | Forte | Partiel | Couleur se repand comme de la peinture | Identite créative, art, mode |
| Magnetic | Tres forte | Non (desktop) | Bouton "suit" le curseur | Sections hero uniquement |
Hover Translate
En plus de l'effet hover, une option supplémentaire : Hover Translate (active par défaut).
Quand active, le bouton se déplace légèrement vers le haut au survol (environ 2-3px). Cet effet se combine avec l'effet hover choisi pour un double feedback.
Presets de décoration
Les presets de décoration sont un système de style visuel avance qui s'applique par-dessus les styles de base. Ils sont configurés dans Paramètres du thème > Décoration des medias > Boutons.
| Preset | Description | Idéal pour |
|---|---|---|
| None | Style de base pur | Usage général |
| Classic | Ombre légère, aspect "bouton physique" | Boutiques traditionnelles, e-commerce classique |
| Gradient | Degradé subtil sur le fond | Boutiques premium, beauté, cosmétiques |
| Brick | Bordure epaisse, decalage d'ombre retro | Boutiques vintage, artisanat, streetwear |
| Ghost | Transparent, seulement la bordure visible | Boutiques minimalistes, luxe, design épuré |
| Bubble | Coins tres arrondis, ombre diffuse, flottant | Boutiques enfants, jouets, alimentation saine |
Option : Appliquer aux boutons de navigation
Une case a cocher vous permet d'appliquer le preset de décoration choisi également aux boutons de navigation des sliders (flèches précédent/suivant). Par défaut, cette option est désactivée.
Combinaisons recommandées par type de boutique
Boutique de mode luxe
- Style 1 : Fond Text (noir), texte Background (blanc)
- Border radius : 0 px (carre)
- Effet hover : Fill Slide
- Preset : None ou Ghost
- Espacement : 24/8 px
Boutique tech / startup
- Style 1 : Fond Accent 1 (bleu vif), texte Background (blanc)
- Border radius : 8 px
- Effet hover : Darker
- Preset : None
- Espacement : 20/8 px
Boutique alimentation / bio
- Style 1 : Fond Accent 1 (vert), texte Background (blanc)
- Border radius : 100 px (pilule)
- Effet hover : Scale
- Preset : Bubble
- Espacement : 16/8 px
Boutique vintage / artisanat
- Style 1 : Fond Accent 1 (couleur chaude), texte Background (blanc)
- Border radius : 0 px (carre)
- Effet hover : Darker
- Preset : Brick
- Espacement : 16/6 px
- Bordure : Oui, 2px, Text
Boutique enfants / jouets
- Style 1 : Fond Accent 1 (couleur vive), texte Background (blanc)
- Border radius : 100 px (pilule)
- Effet hover : Scale ou Paint
- Preset : Bubble
- Espacement : 24/10 px
Tableau récapitulatif de tous les réglages
| Réglage | Type | Range/Options | Défaut |
|---|---|---|---|
| Police | Select | Heading / Body | Heading |
| Taille police | Range | 80-130% | 100% |
| Spacing horizontal | Range | 4-40 px | 16 px |
| Spacing vertical | Range | 4-40 px | 4 px |
| Border radius | Range | 0-100 px | 10 px |
| Bordure | Checkbox | Oui / Non | Non |
| Epaisseur bordure | Range | 1-5 px | 1 px |
| Couleur bordure | Select | Darker / Lighter / Text / Subtle | Darker |
| Gras | Checkbox | Oui / Non | Oui |
| Hover translate | Checkbox | Oui / Non | Oui |
| Effet hover | Select | Darker / Lighter / Fill Slide / Scale / Paint / Magnetic | Darker |
| Style 1 fond | Select | Accent 1 / Accent 2 / Text / Transparent | Accent 1 |
| Style 1 texte | Select | Background / Foreground / Accent 1 / Accent 2 | Background |
| Style 2 fond | Select | Accent 1 / Accent 2 / Text / Transparent | Accent 2 |
| Style 2 texte | Select | Background / Foreground / Accent 1 / Accent 2 | Background |
| Style 3 fond | Select | Accent 1 / Accent 2 / Text / Transparent | Transparent |
| Style 3 texte | Select | Background / Foreground / Accent 1 / Accent 2 | Background |
Prochaines étapes
- Boutons (design) — Les 3 styles de boutons en détail
- Couleurs — Les palettes qui colorent vos boutons
- Effets hover — Animations au survol des boutons
- Typography — Polices utilisées dans les boutons