Comment ajouter une ombre au texte d'un bouton à l'aide d'un code personnalisé

Ombre portée du texte du bouton À propos dans GemPages

Le texte à l'intérieur de l'élément Button peut être personnalisé à l'aide de CSS. En ajoutant un ombre de texte En effet, vous pouvez :

• Rendre le texte des boutons plus visible sur des arrière-plans chargés
• Créez un style plus moderne ou haut de gamme.
• Améliorer la hiérarchie visuelle des boutons d'appel à l'action
• Mettez en évidence les actions importantes telles que Acheter, Ajouter au panier, Commencer

Cette méthode fonctionne avec Éléments de bouton dans GemPages où vous souhaitez améliorer visuellement le texte sans modifier la disposition des boutons.

Étape par étape : Comment ajouter une ombre au texte d’un bouton

Suivez attentivement ces étapes pour appliquer un effet d'ombre au texte de votre bouton.

Étape 1 : Ouvrez votre page dans l’éditeur GemPages

De ton Tableau de bord GemPagesOuvrez la page contenant le bouton que vous souhaitez modifier.

Localisez le Élément bouton qui contient le texte auquel vous souhaitez ajouter une ombre.

Étape 2 : Ouvrez le panneau de code personnalisé

Faites un clic droit directement sur le Élément bouton qui contient le texte.

Puis:

• Sélectionner Code personnalisé

• Le panneau CSS s'affiche

Ce panneau vous permet d'ajouter un style personnalisé spécifiquement à ce bouton.

Étape 3 : Copier la classe de l’élément

Lorsque le panneau CSS s'ouvrira, vous verrez un classe d'élément dès la première ligne.

Cela ressemblera à ceci:

.gp-button-abc123

Copiez ce nom de classe — vous l'utiliserez à l'étape suivante.

Étape 4 : Coller le code d’ombre portée

Ajoutez le code CSS personnalisé suivant dans le panneau :

Puis:

• remplacer ElementClass avec votre classe de bouton actuelle
• Cliquez à nouveau Enregistrer

Par exemple, si votre classe d'élément est : .gp-button-abc123

Votre code final devrait ressembler à ceci :

.gp-button-abc123 {

 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;

}

Une fois appliqué, le texte de votre bouton s'affichera avec un léger effet d'ombre.

Comprendre les valeurs d'ombre du texte

Le ombre de texte Cette propriété comprend quatre valeurs. Chaque valeur détermine l'apparence de l'ombre.

texte-ombre : 2px 2px 4px rgba(0, 0, 0, 0.3);

Voici la signification de chaque valeur :

Décalage horizontal de 2 px

Contrôle la distance parcourue par l'ombre. gauche ou à droite.

Exemples :

2px → déplace l'ombre vers la droite

-2px → déplace l'ombre vers la gauche

Décalage vertical de 2 px

Contrôle la distance parcourue par l'ombre. haut ou bas.

Exemples :

2px → déplace l'ombre vers le bas

-2px → déplace l'ombre vers le haut

4px → Rayon de flou

Contrôle la netteté ou la douceur de l'ombre.

Exemples :

0px → ombre nette

4px → ombre douce

10px → ombre très douce

Des chiffres plus élevés créent des ombres plus douces.

rgba(0, 0, 0, 0.3) → Couleur de l'ombre

Contrôle la couleur et la transparence de l'ombre.

Format:

rgba(rouge, vert, bleu, opacité)

Exemple :

rgba(0, 0, 0, 0.3)

Moyens:

• Rouge: 0
• Vert: 0
• Bleu : 0
• Opacité : 0.3 (30 % visible)

Cela crée un ombre noire semi-transparente.

Si vous souhaitez créer des couleurs d'ombre personnalisées, ces outils peuvent vous aider à générer facilement des valeurs RGBA.

• https://rgbacolorpicker.com
• https://cssgradient.io
• https://www.w3schools.com/colors/colors_picker.asp
• https://htmlcolorcodes.com

Ces outils vous permettent de :

• Choisissez visuellement n'importe quelle couleur
• Ajuster la transparence (opacité)
• Copiez le rgba(…) valeur directe
• Prévisualisez les couleurs d'ombre avant de les utiliser.