Change from "default" to "on-hover" to "selected" states in a 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. 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!

what exactly are you missing with the standard button?

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…

add this in an html element

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

add left icon and class to the button

enjoy
image

Many, many thanks for your help @dorilama. I appreciate it a lot :raised_hands:t2:

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?

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

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