# How do I add a "clicked" state to a button?

**URL:** <https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582>\
**Category:** How do I?\
**Created:** [May 24, 2022, 12:59am UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582 "2022-05-24T00:59:33Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sbkbdigital](https://avatars.discourse-cdn.com/v4/letter/s/a3d4f5/32.png) [@sbkbdigital](https://community.weweb.io/u/sbkbdigital)\
**Post date:** [May 24, 2022, 12:59am UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582/1 "2022-05-24T00:59:34Z")

</div>

I want to add different formatting (background/border color, etc.) to a button when it’s clicked. Currently, there is no animation when clicking, therefore no feedback for the user.

Thanks!

---

<div class="post-metadata">

**Author:** ![kevinwasie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kevinwasie/32/402_2.png) [@kevinwasie](https://community.weweb.io/u/kevinwasie)\
**Post date:** [May 24, 2022, 2:25am UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582/2 "2022-05-24T02:25:56Z")

</div>

Do you want the button to change colors = when the user presses down on the button, and then change back to the previous state once they let their mouse button go up?

Or, are you just wanting to change the color when they click on it, and then leave it that color?

---

<div class="post-metadata">

**Author:** ![Edward](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/edward/32/249_2.png) [@Edward](https://community.weweb.io/u/Edward)\
**Post date:** [May 24, 2022, 5:30am UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582/3 "2022-05-24T05:30:58Z")

</div>

Hi. The active class should do it

> **[W3Schools online HTML editor](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate3)**
>
> The W3Schools online code editor allows you to edit code and view the result in your browser

---

<div class="post-metadata">

**Author:** ![sbkbdigital](https://avatars.discourse-cdn.com/v4/letter/s/a3d4f5/32.png) [@sbkbdigital](https://community.weweb.io/u/sbkbdigital)\
**Post date:** [May 24, 2022, 12:59pm UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582/5 "2022-05-24T12:59:44Z")

</div>

Hi. Good point. My question was about the first scenario, but I would also want to know about the second.

---

<div class="post-metadata">

**Author:** ![sbkbdigital](https://avatars.discourse-cdn.com/v4/letter/s/a3d4f5/32.png) [@sbkbdigital](https://community.weweb.io/u/sbkbdigital)\
**Post date:** [May 24, 2022, 1:51pm UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582/6 "2022-05-24T13:51:09Z")

</div>

Thanks. I would rather stay within the functionality of WeWeb, if possible. I believe custom CSS doesn’t render in the editor or preview modes, only in the published app. This makes it difficult to iterate on it.

---

<div class="post-metadata">

**Author:** ![Edward](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/edward/32/249_2.png) [@Edward](https://community.weweb.io/u/Edward)\
**Post date:** [May 24, 2022, 2:17pm UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582/7 "2022-05-24T14:17:58Z")

</div>

Hello! Sure. I was thinking to add Active class here, but it didnt seem to do the job. I expected this to work. Maybe someone from WeWeb could clarify how to use additional states that we add here?

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/08df9dc8e9acb8632a267c1182f72b72ab371ce0.png)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [May 25, 2022, 2:07pm UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582/8 "2022-05-25T14:07:12Z")

</div>

Hello!

The tech team is working on huge improvements to the states.

In the meantime, you’ll need to manually add an `active` state.

See Aurélie’s answer [here](https://community.weweb.io/t/paginator-active-page/379/2).

---

<div class="post-metadata">

**Author:** ![hsatl](https://avatars.discourse-cdn.com/v4/letter/h/67e7ee/32.png) [@hsatl](https://community.weweb.io/u/hsatl)\
**Post date:** [August 23, 2022, 3:58pm UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582/9 "2022-08-23T15:58:45Z")

</div>

hi @Joyce just checking in if element state management (like active, clicked etc.) is in works or the timeline is still tbd.

---

<div class="post-metadata">

**Author:** ![hsatl](https://avatars.discourse-cdn.com/v4/letter/h/67e7ee/32.png) [@hsatl](https://community.weweb.io/u/hsatl)\
**Post date:** [August 23, 2022, 5:06pm UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582/10 "2022-08-23T17:06:48Z")

</div>

hi, I just noticed that there is a state called “Active Link”. If I use that state, it works as intended. Just wanted to put it out there in case anyone was looking for it as well.

---

<div class="post-metadata">

**Author:** ![Mael](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mael/32/13246_2.png) [@Mael](https://community.weweb.io/u/Mael)\
**Post date:** [August 24, 2022, 7:41am UTC](https://community.weweb.io/t/how-do-i-add-a-clicked-state-to-a-button/582/11 "2022-08-24T07:41:58Z")

</div>

Hi @hsatl, we are still working on it 🙂
