We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Webflow: How to use states (hover, pressed, focused) in puzzles?

Home Forums Puzzles Webflow: How to use states (hover, pressed, focused) in puzzles?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #51596

    Hi all,

    I am a non-coder, so maybe this is easy to resolve. :wacko:

    I made a html-interface in webflow. In there i created buttons out of div-containers. Then I created “states” for this container/buttons so that the appearance change when clicked or hovered or focused.

    How can I trigger those states in puzzles?
    I want the button to change to the pressed state permanently when the button/div-container is pressed, so the button looks “active” and the user knows what button he pressed last. Is that possible?

    I already looked isnide the .css-file created by webflow and my container now has two classes. The first one is called .button and the second is called .button:active.

    Thanks in advance for every help! :good:


    I could be wrong but I think those webflow button states will automatically change without having to use puzzles. I think the puzzles will let you link html buttons to changing something about the 3d object like materials. So, if you have the different button states made in webflow, they should work when you download the html file.


    I am having my html buttons change their image when pressed. I haven’t tested the full html/verge3d website yet but the button state changes when I publish the myvergeProductApp.webflow.io site to test html interface.


    Hey eeey,
    yes the states work when the project is exported, but there is no way that the buttons stay in one of the states.

    In my app I have 2 buttons. Whith those buttons I can change between two 3D-Models. It would be nice if the last clicked button would stay in its changed state after being clicked to have an optical feedback inside the ui of which 3D model is the active one. And if I click the other button and the models change than this button stays in the clicked state and the first button switches back to the normal „not clicked“ state.

    Is something like this possible when working with webflow without creating a new css class or manually changing multiple css rules with puzzles?


    I took a look at the scooter puzzles. Verge uses puzzles to change the border color of selection. check out puzzles for fullscreen button and the tab “Customizer_2”.


    I wish it were simpler too though! I can only think of doing it with the puzzles at the moment.


    Yes, the best way is to use Puzzle to change state of the html elements permanently.

    Co-founder and lead graphics specialist at Soft8Soft.


    Hi Mikhail,

    yes Puzzle is the way! ;-) But I dont know how to change the states permanently in puzzles…

    I also tried to configure the “new state” manually in puzzles.

    the button is just a black box. But I want this box to have a box shadow after being pressed. The divs’s ID is: button_1
    So I use the set style puzzle set to box-shadow to 0 7px 13px 5px #000; for elem button_1.

    But nothing changes. What am I doing wrong?
    If I set the style display to none for elem button_1 the button disappears. So the ID is correct…

    You must be logged in to view attached files.

    Try to remove “;” at the end of the text string.

    Co-founder and lead graphics specialist at Soft8Soft.


    That was it! THANK YOU! :yahoo: :heart:

    Always the little things…



    Co-founder and lead graphics specialist at Soft8Soft.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.