Button color-change on click, in React

Question

I am trying to have a button to change its color when clicked in React.

I found this and tested it: https://reactgo.com/react-change-button-color-onclick/

The code being:

const [active, setActive] = useState(false);

......

<button
  onClick={() => {
    setActive(!active)
  }}
  style={{
    backgroundColor: active ? "black" : "white"
  }}
>
  The-Button
</button>

Though it works, it is not what I need at the moment.

With this code the button goes white, then black, then white, then black, .... at each click.

But what I want is the button being black going white when clicked and back to black when released.

How can I get this effect?

Drew Reese · Accepted Answer · 2025-04-27 06:10:13Z

1

You don't need React state or any special click handler logic to achieve toggling the background color while the button is pressed. You can use pure CSS to do this.

Add a class to the button that provides the default non-pressed CSS styling, and then provide also :active styling for when the button is pressed.

Example:

<button className="the-button">The Button</button>

.the-button {
  background-color: black;
  color: white;
  .....
}

.the-button:active {
  background-color: white;
  color: black;
}

answered Apr 27 at 6:10

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michel May 3 at 6:33

This works even better than the other answers. The other solution worked on my computer but not on my mobile. This one does.

Drew Reese May 3 at 6:44

@Michel That is likely because touchscreen devices such as mobile phones and tablets don't generally use mice so there are not any mouse events. You might be able to leverage pointer events which are intended to "handle pointing input devices such as a mouse, pen/stylus or touch", so a kind of mix of mouse and touch events. That said, I think solving it in CSS land is more optimal.

Dhaval Makwana · Accepted Answer · 2025-04-27 06:07:19Z

1

For this need to use mouse events

<button
    onMouseDown={() => setActive(true)}
    onMouseUp={() => setActive(false)}
    onMouseLeave={() => setActive(false)}
    style={{ backgroundColor: active ? 'white' : 'black', color: active ? 'black' : 'white' }}
>
    The-Button
</button>

answered Apr 27 at 6:07

Dhaval Makwana

1221 silver badge10 bronze badges

Comments

X8inez · Accepted Answer · 2025-04-27 06:13:39Z

0

To achieve this, you will need to make use of these events to toggle between colors: onMouseDown onMouseUp onMouseLeave

...

 <button
    onMouseDown={() => setActive(true)}
    onMouseUp={() => setActive(false)}
    onMouseLeave={() => setActive(false)}
    style={{
      backgroundColor: active ? "white" : "black",
      color: active ? "black" : "white",
      }}
    >
     The-Button
 </button>
...

answered Apr 27 at 6:13

X8inez

1,6182 gold badges8 silver badges19 bronze badges

4 Comments

Drew Reese Apr 27 at 6:39

Other than some links to documentation this is identical to an existing answer.

X8inez Apr 27 at 7:06

The page only refreshed after I submitted my answer. I wouldn't have proceeded if I had seen a similar answer.

Drew Reese Apr 27 at 22:57

Yet you deleted it after posting, but then undeleted it for some reason in spite of it being a duplicate answer.

X8inez Apr 28 at 3:53

Well, I figured mine has links to provide more context. Besides, the focus here is to solve the issue.

Dhamotharan · Accepted Answer · 2025-04-27 06:36:50Z

0

You can try like his

<button
    onMouseDown={() => setActive(true)}
    onMouseUp={() => setActive(false)}
    onMouseLeave={() => setActive(false)}
    style={{ 
         backgroundColor: active ? '#fff' : '#000', 
         color: active ? '#000' : 'fff'
    }}
>
    Button Label
</button>

answered Apr 27 at 6:36

Dhamotharan

132 silver badges8 bronze badges

1 Comment

Drew Reese Apr 27 at 6:37

This is no different than two other existing answers.

Collectives™ on Stack Overflow

Button color-change on click, in React

4 Answers 4

2 Comments

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related