# How make button after and button hover after?

**URL:** <https://community.weweb.io/t/how-make-button-after-and-button-hover-after/8761>\
**Category:** How do I?\
**Tags:** design\
**Created:** [May 23, 2024, 10:44pm UTC](https://community.weweb.io/t/how-make-button-after-and-button-hover-after/8761 "2024-05-23T22:44:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![gustavoSponholz](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/gustavosponholz/32/11538_2.png) [@gustavoSponholz](https://community.weweb.io/u/gustavoSponholz)\
**Post date:** [May 23, 2024, 10:44pm UTC](https://community.weweb.io/t/how-make-button-after-and-button-hover-after/8761/1 "2024-05-23T22:44:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [May 24, 2024, 12:24am UTC](https://community.weweb.io/t/how-make-button-after-and-button-hover-after/8761/2 "2024-05-24T00:24:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gustavoSponholz](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/gustavosponholz/32/11538_2.png) [@gustavoSponholz](https://community.weweb.io/u/gustavoSponholz)\
**Post date:** [May 24, 2024, 1:38am UTC](https://community.weweb.io/t/how-make-button-after-and-button-hover-after/8761/3 "2024-05-24T01:38:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [May 24, 2024, 7:04am UTC](https://community.weweb.io/t/how-make-button-after-and-button-hover-after/8761/4 "2024-05-24T07:04:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gustavoSponholz](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/gustavosponholz/32/11538_2.png) [@gustavoSponholz](https://community.weweb.io/u/gustavoSponholz)\
**Post date:** [May 24, 2024, 1:42pm UTC](https://community.weweb.io/t/how-make-button-after-and-button-hover-after/8761/5 "2024-05-24T13:42:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [May 24, 2024, 2:01pm UTC](https://community.weweb.io/t/how-make-button-after-and-button-hover-after/8761/6 "2024-05-24T14:01:20Z")

</div>

![CleanShot 2024-05-24 at 15.56.05](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f75426b0708ec4b5fe7f771021d6f6e1e9ed72c1.gif)

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):

```auto
<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;`