# Create an interactive button with color states in PenPot

**URL:** <https://community.penpot.app/t/create-an-interactive-button-with-color-states-in-penpot/8485>\
**Category:** Ask the community\
**Tags:** design, ux-design\
**Created:** [April 16, 2025, 2:17pm UTC](https://community.penpot.app/t/create-an-interactive-button-with-color-states-in-penpot/8485 "2025-04-16T14:17:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ali](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ali/32/7729_2.png) [@ali](https://community.penpot.app/u/ali)\
**Post date:** [April 16, 2025, 2:17pm UTC](https://community.penpot.app/t/create-an-interactive-button-with-color-states-in-penpot/8485/1 "2025-04-16T14:17:17Z")

</div>

Hello, I am trying to get started with PenPot to switch from Figma to PenPot.  
But I am stuck on this case.  
I want this button to follow these steps:  
For each state, it changes color.  
I created the small component, then I go to Prototype, and honestly, I don’t understand what I should do.  
I am attaching an image of what I want.

 ![Capture d'écran 2025-04-16 155704](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/2/27ae95e838979d40a9bcdf62be336d5c890baaf4.png)  
Merci beaucoup pour votre aide.

---

<div class="post-metadata">

**Author:** ![Louis](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/louis/32/10600_2.png) [@Louis](https://community.penpot.app/u/Louis)\
**Post date:** [April 17, 2025, 12:43pm UTC](https://community.penpot.app/t/create-an-interactive-button-with-color-states-in-penpot/8485/2 "2025-04-17T12:43:33Z")

</div>

Bonjour Ali,

Currently you can’t set such states in Penpot when prototyping. You can change the appearance of an element when hovering it (playing with the “mouse enters” and “mouse leaves” options combined with an overlay), but you can’t make the prototype remember visited states or focused states.

---

<div class="post-metadata">

**Author:** ![ali](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ali/32/7729_2.png) [@ali](https://community.penpot.app/u/ali)\
**Post date:** [April 17, 2025, 12:53pm UTC](https://community.penpot.app/t/create-an-interactive-button-with-color-states-in-penpot/8485/3 "2025-04-17T12:53:20Z")

</div>

Alright, I found it.  
You need to apply the three actions to the component.  
For Link, Trigger 01 = Mouse Enter. Action = Open overlay = destination = Hover. (the file it should play).  
For Link, Trigger 02 = Mouse Leave. Action = Close overlay = destination = Hover. (the file it should play).  
For Link, Trigger 03 = On Click. Action = Activate / deactivate = destination = Active. (the file it should play).  
I’m not sure about Trigger 03.  
Thanks.