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.

Change button color after clicking

Home Forums Programming Change button color after clicking

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #56128
    felix
    Customer

    Hello. I have a perhaps trivial problem.
    I’m using Dreamweaver for my Verge3D project (client didn’t want to use webflow). I created my beautiful buttons and gave them a hover effect with the mouseover, but I would like the new color to remain after clicking. And after clicking another button, the first one would go back to the main color.
    The same problem I have with clickable annotations which I created with puzzles.
    Thanks.

    • This topic was modified 2 months, 1 week ago by felix.
    #56131
    michael64
    Participant

    It depends how you build your buttons:
    I see two solutions:
    1. Use Javascript to add or remove additional styles to the buttons, or
    2. Build the buttons from a combination of input labels

    <input type=”radio” name=”specialButton” class=”specialButtonTriggerStyleClass” id=”specialButton1″>
    <label class=”specialButtonStyleClass” for=”specialButton1″>Button 1</label>
    <input type=”radio” name=”specialButton” class=”specialButtonTriggerStyleClass” id=”specialButton2″>
    <label class=”specialButtonStyleClass” for=”specialButton2″>Button 2</label>

    <style>
    .specialButtonTriggerStyleClass {
    display: none;
    }
    .specialButtonTriggerStyleClass:checked + .specialButtonStyleClass{
    border: 2px solid green;
    }
    .specialButtonStyleClass {
    border: 2px solid red;
    }
    </style>`

    `

    #56305
    felix
    Customer

    Thank You, but I am a at the wery begginning with verge3D and coding. I don’t know whay to do with theese codes :cry:
    Is it possible to do it with puzzles?
    Thank you.

    • This reply was modified 2 months ago by felix.
    #56310
    kdv77kdv
    Participant

    Use CSS to assign colors you need.

    Let’s suppose you have a CSS style for buttons

    .active-button {
      display: inline-block;
      background: #226799;
    }
    .active-button:hover {
       background: #354251;
    }

    just add the second class name to the pressed button

    .inactive {
      background: #354251;
    }

    The pressed button will have the class name like this class="active-button inactive".
    The other ones have this class name class="active-button"

    #56332
    felix
    Customer

    Thank you all, but I am unable to do so.
    zero knowledge in coding.
    I do some courses and try again

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