How make button after and button hover after?

Ask us anything How do I?
1

I want to change the text of a button when it’s on hover, but I didn’t find a way to change it natively and I also don’t know how to do it just with CSS, the only solution I found was using an HTML widget with code generated by ChatGPT:

.button { position: relative; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; font-size: 16px; } 
    .button::after {
        content: "Novo Texto";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: white;
        background-color: #4CAF50;
        display: none;
        justify-content: center;
        align-items: center;
    }

    .button:hover::after {
        display: flex;
    }

    .button:hover {
        color: transparent;
    }
</style>

Texto Original

I would like to better understand how these after functions work on the web

2

Only way i can think of currently is to add a workflow upon mouse enter. change the variable. bind the text to a variable.

1 Like
3

Yes, you’re right, I did it this way and it worked, the only problem is that I couldn’t apply transitions to make it smoother, would you know how to solve this?

4

What kind of transition are you trying to achieve? There can be multiple way depending on the desired behavior :slight_smile:

5

I wanted to make a simple transition, with a fade or scale when the text changes

6

CleanShot 2024-05-24 at 15.56.05

One method I can think of would be to create a custom button and have 2 text elements inside.

  1. Add a new hover state on the button wrapper with Apply to children enabled.
  2. Have 1 text with conditional rendering On and the other Off.
    3.On hover of the button, on each of these element, change the display.
    That should take care of display the right text.

For the animation, you can add a small CSS animation snippet (or use the Animation Beta feature):

<style>
/** Put that in an HTML Embed to preview it in the Editor**/
@keyframes button-animation {
    from {
    opacity: 0
  }
}
</style>

Apply that to the 2 text elements by inserting the following CSS property to their custom CSS: animation: 1s linear button-animation;