Change button color after clicking

This topic has 4 replies, 3 voices, and was last updated 3 years, 2 months ago by felix.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
2022-09-27 at 7:39 am #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.

2022-09-27 at 8:12 am #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>`

`

2022-10-02 at 4:38 pm #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
Is it possible to do it with puzzles?
Thank you.

2022-10-02 at 5:52 pm #56310
kdv
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"

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
2022-10-03 at 8:32 am #56332

felix
Customer

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

Posts