# Change from "default" to "on-hover" to "selected" states in a DIV

**URL:** <https://community.weweb.io/t/change-from-default-to-on-hover-to-selected-states-in-a-div/5271>\
**Category:** How do I?\
**Created:** [November 7, 2023, 12:58pm UTC](https://community.weweb.io/t/change-from-default-to-on-hover-to-selected-states-in-a-div/5271 "2023-11-07T12:58:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Momuu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/momuu/32/5001_2.png) [@Momuu](https://community.weweb.io/u/Momuu)\
**Post date:** [November 7, 2023, 12:58pm UTC](https://community.weweb.io/t/change-from-default-to-on-hover-to-selected-states-in-a-div/5271/1 "2023-11-07T12:58:03Z")

</div>

Hello everyone, I am trying to give a Div (is a custom button since the weweb button can not be set to Flex) three states “default” to “on-hover” to “selected” following @Joyce tutorial [States | WeWeb documentation](https://docs.weweb.io/css-and-styling/states.html). The problem is that I have to create a bunch of workflows and it is not working properly:

When mouse is out instead o maintain “selected” state this change to “default”  
I don not know how to implement a second click to “unselect”

Maybe I am missing something. Can someone help me how to achieve this?. Thanks!

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [November 7, 2023, 1:15pm UTC](https://community.weweb.io/t/change-from-default-to-on-hover-to-selected-states-in-a-div/5271/2 "2023-11-07T13:15:31Z")

</div>

what exactly are you missing with the standard button?

---

<div class="post-metadata">

**Author:** ![Momuu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/momuu/32/5001_2.png) [@Momuu](https://community.weweb.io/u/Momuu)\
**Post date:** [November 7, 2023, 2:50pm UTC](https://community.weweb.io/t/change-from-default-to-on-hover-to-selected-states-in-a-div/5271/3 "2023-11-07T14:50:28Z")

</div>

Hi, thanks! I want a button with an icon on the top and text on the bottom. And since it doesn’t allow to set it to flex…

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [November 7, 2023, 3:29pm UTC](https://community.weweb.io/t/change-from-default-to-on-hover-to-selected-states-in-a-div/5271/4 "2023-11-07T15:29:59Z")

</div>

add this in an html element

```auto
<style>.my-btn{flex-direction: column;}</style>

```

add left icon and class to the button

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/72ff4ea9ba1aab1b9d2e0a5589f98297afedb41c.png)

enjoy  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4f35ef7347e8455782648806d87995dec0abb7a6.png)

---

<div class="post-metadata">

**Author:** ![Momuu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/momuu/32/5001_2.png) [@Momuu](https://community.weweb.io/u/Momuu)\
**Post date:** [November 7, 2023, 3:51pm UTC](https://community.weweb.io/t/change-from-default-to-on-hover-to-selected-states-in-a-div/5271/5 "2023-11-07T15:51:56Z")

</div>

Many, many thanks for your help @dorilama. I appreciate it a lot 🙌🏻

---

<div class="post-metadata">

**Author:** ![Momuu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/momuu/32/5001_2.png) [@Momuu](https://community.weweb.io/u/Momuu)\
**Post date:** [November 7, 2023, 4:13pm UTC](https://community.weweb.io/t/change-from-default-to-on-hover-to-selected-states-in-a-div/5271/6 "2023-11-07T16:13:59Z")

</div>

sorry @dorilama, do you know a way to add this code to general custom code instead so I can reuse it without the html tag?

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [November 7, 2023, 4:26pm UTC](https://community.weweb.io/t/change-from-default-to-on-hover-to-selected-states-in-a-div/5271/7 "2023-11-07T16:26:32Z")

</div>

you can add the cote globally to the app but in that way it will be applied only in the published app

---

<div class="post-metadata">

**Author:** ![Momuu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/momuu/32/5001_2.png) [@Momuu](https://community.weweb.io/u/Momuu)\
**Post date:** [November 7, 2023, 4:38pm UTC](https://community.weweb.io/t/change-from-default-to-on-hover-to-selected-states-in-a-div/5271/8 "2023-11-07T16:38:10Z")

</div>

Got it. Many thanks again. Really appreciate it @dorilama