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.

Ok, I Agree

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

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

Tagged: , , , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • 2022-05-03 at 11:54 am #51596
    Monokultur-Studio
    Customer

    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:

    2022-05-03 at 7:35 pm #51613
    eeey
    Participant

    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.

    2022-05-03 at 7:38 pm #51614
    eeey
    Participant

    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.

    2022-05-03 at 8:17 pm #51618
    Monokultur-Studio
    Customer

    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?

    2022-05-03 at 9:48 pm #51619
    eeey
    Participant

    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”.

    2022-05-03 at 9:49 pm #51620
    eeey
    Participant

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

    2022-05-04 at 6:56 am #51625
    Mikhail Luzyanin
    Staff

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

    Co-founder and lead graphics specialist at Soft8Soft.

    2022-05-04 at 7:13 am #51630
    Monokultur-Studio
    Customer

    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.
    Example:

    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…

    Attachments:
    You must be logged in to view attached files.
    2022-05-04 at 7:21 am #51632
    Mikhail Luzyanin
    Staff

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

    Co-founder and lead graphics specialist at Soft8Soft.

    2022-05-04 at 10:51 am #51660
    Monokultur-Studio
    Customer

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

    Always the little things…

    2022-05-05 at 7:07 am #51674
    Mikhail Luzyanin
    Staff

    :good:

    Co-founder and lead graphics specialist at Soft8Soft.

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