How to change the color of a part of the text of a button

Hello,
How to change the color of a part the text of a button .
For example, on the photo attached I want the (20) to be in yellow and the rest in black.

The solution I found is to make 2 different buttons.
However, as I integrated a code to underline the text when the mouse passes over it.
It is necessary that the whole text with the (20) is underlined at the same time.
It’s not the case now since it’s 2 different buttons.

In short, I want my text (button) attached, can be underlined in its entirety during the passage of the mouse and that all (20) of the text can be yellow and the rest in black.
Thank you.

I hope you understand, I am French, I have a little trouble with English ^^
text

That might be a tuffy!..

Using buttons doesn’t allow any sort of underline on its hover state.
The best you could do is have your “(20)” as a background image (set to right) on your button to keep the colour, and have your text as black in the button. The button colour change on hover is enough for the User to know it is clickable.

Thanks, but the problem is that I want the (20) to remain a button, or at least that it can be used to open a window on mouseover.
There is no solution to change the color of a part of the text of the same button?
I suppose that to do this, the only solution is to buy the developer’s tools?

If you know CSS you could use the Embed widget. You can read more about it here - Advanced Editing | Sparkle Documentation

Can we also use the <span.> tag in this way? Thanks

I can’t tell you. It is a matter of playing and seeing if it works.
The Embed element / widget is a code environment so I’m guessing it might.

Bonjour Juju

Je suis anglais donc j’ai un peu de mal avec le français. Je posterai ceci dans les deux langues donc entre mon français élémentaire et mon meilleur anglais vous aurez une chance!

It is possible to do what you want but it is a little bit convoluted.

Instead of text buttons use image buttons.

Create an image of your button text exactly as you have shown in your post. Create a second image of the exact same text underlined. (You can underline the yellow in yellow and the black in black if you want. You can also change the image background colour if you want.) The two images must be exactly the same size with the exactly same text placement within the image. Save the two images as jpg or png.

Create a button, (I will call it ‘Original Text Button’.) Embed the original text image in the button using stretch to fit. Set all the button colours to transparent.

Create a PopUp (I will call it ‘Underlined Text Popup’.) Set the background colour to transparent.

Create a new button inside this PopUp (I will call it ‘Underlined Text Button’) Embed the underlined text image in this button once again using Stretch to Fit. Set all the button colours to transparent.

Use the Position and Size settings in the Arrange Tab to make sure that both buttons and the PopUp all have exactly the same size and position on the page.

Set the Original Text button to open ‘Underlined Text PopUp’ on Mouse Hover and set it to Close on Mouse Out. This will ensure that the text changes to underlined any time the mouse is over it.

Set the ‘Underlined Text Button’ inside the ‘Underlined Text PopUp’ to go to wherever you want On Click.

When you mouse over the original button the PopUp will cover it in exact registration with the new button. Clicking the new button will take you to the desired destination.

It looks a bit complicated at first sight but once you have done it once you will find it is quite simple.

Good luck!

Il est possible de faire ce que vous voulez mais c’est un peu compliqué.

Au lieu de boutons de texte, utilisez des boutons d’image.

Créez une image du texte exactement comme vous l’avez montré dans votre message ici. Créez une deuxième image du même texte souligné. (Vous pouvez souligner le jaune en jaune et le noir en noir si vous le souhaitez. Vous pouvez aussi changer le couleur du fond si vous voulez.) Les deux images doivent être exactement de la même taille avec exactement le même placement de texte dans dans l’image. Sauvez les deux images comme jpg ou png.

Créez un bouton (je l’appellerai ‘Original Text Button’). Incorporez l’image de texte d’origine dans le bouton en utilisant Stretch to Fit. Définissez toutes les couleurs du bouton sur transparent.

Créez un PopUp (je l’appellerai ‘Underlined Text PopUp’.) Définissez la couleur du fond sur transparent.

Créez un nouveau bouton à l’intérieur de cette PopUp (je l’appellerai ‘Underlined Text Button’). Incorporez à nouveau l’image de texte souligné dans ce bouton en utilisant Stretch to Fit. Définissez toutes les couleurs du bouton sur transparent.

Utilisez les paramètres Position and Size dans l’onglet Arrange pour vous assurer que les boutons et ll PopUp ont exactement la même taille et la même position sur la page.

Définissez le ‘Original Text Button’ pour ouvrir le PopUp ‘Underlined Text PopUp’ au survol de la souris et réglez-le sur Close on Mouse Out. Cela garantira que le texte passe en souligné à chaque fois que la souris passe dessus.

Définissez le ‘Underlined Text Button’ dans le ‘Underlined Text PopUp’ pour aller où vous voulez en cliquant.

Lorsque vous passez la souris sur le bouton d’origine, le PopUp le recouvre exactement avec le nouveau bouton. En cliquant sur le nouveau bouton, vous serez dirigé vers la destination souhaitée.

Cela semble un peu compliqué à première vue, mais une fois que vous l’avez fait, vous constaterez que c’est assez simple.

Bonne chance!

2 Likes

J’ai oubliez de dire que vous aurez besoin du Photoshop ou aucune autre équivalent pour créer les images de la texte.

Si vous voulez posez des questions concernant ma réponse n’hésite pas de me demander. :grinning:

thank you David, I found an alternative solution

Excellent! Good luck.