How do I make the button change color when active

Question

There are two buttons in my sidebar. I want to make my button blue when it's clicked and to remain blue until the other button is clicked. It shouldn't change back to the old color when we click on the body or anywhere else but only when I click the other button.

It would also be nice if someone can show me if those sidebar buttons to turn white again when clicked on the create new button on the navbar.

code sandbox https://codesandbox.io/s/sweet-feynman-2tvy5

css for the buttons

.sideButton {
  width: 200px;
  height: 50px;
  padding-left: 0px;
  margin-left: 0px;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  border-radius: 0 10px 10px 0;
  background-color: rgba(191, 191, 191, 0.14);
  box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  -webkit-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.1);
}
.sideButton:focus,
.sideButton:active,
.sideButton.active {

  background-color: blue;
}
.sideButton2 {
  width: 200px;
  height: 50px;
  padding-left: 0px;
  margin-left: 0px;
  margin-top: 55px;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  border-radius: 0 10px 10px 0;
  background-color: white;
  box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  -webkit-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.1);
}
.sideButton2:focus,
.sideButton2:active,
.sideButton2.active {

  background-color: blue;
}

the react files where the button is located

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

import { Nav, Button } from "react-bootstrap";

import "../App.css";
export default class LeftBox extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <div className="nav">
          <ul>
            <li className="list-item">
              <Link to="/about">
                <input
                  type="button"
                  className="sideButton sideBarText"
                  value="Dashboard"
                />
              </Link>
            </li>
            <li className="list-item">
              <Link to="/">
                <input
                  type="button"
                  className="sideButton2 sideBarText2"
                  value="People"
                />
              </Link>
            </li>
          </ul>
        </div>
      </>
    );
  }
}

Answer 1

the easiest way to make this possible is using NavLink

leftBox.js

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  NavLink
} from "react-router-dom";

import { Nav, Button } from "react-bootstrap";

import "../App.css";
export default class LeftBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      button: false
    };
  }
  render() {
    return (
      <>
        <div className="nav">
          <ul>
            <li className="list-item">
              <NavLink
                to="/about"
                className="sideButton"
                activeClassName="active_navbar"
                exact
              >
                 Dashboard
              </NavLink>
            </li>
            <li className="list-item">
              <NavLink
                to="/"
                className="sideButton2"
                activeClassName="active_navbar"
                exact
              >
                People
              </NavLink>
            </li>
          </ul>
        </div>
      </>
    );
  }
}

Change CSS

.sideButton {
  width: 200px;
  height: 50px;
  padding-left: 0px;
  margin-left: 0px;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  border-radius: 0 10px 10px 0;
  background-color: rgba(191, 191, 191, 0.14);
  box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0;
  right: 0;

  /* show a hand cursor on hover; some argue that we
  should keep the default arrow cursor for buttons */
  cursor: pointer;
  -webkit-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.1);
}
.sideButton:focus,
.sideButton:active,
.sideButton.active {
  /* background-color: rgba(191, 191, 191, 0.14); */
  background-color: blue;
}
.sideButton:selected {
  background-color: #007bff;
}

.sideButton2 {
  width: 200px;
  height: 50px;
  padding-left: 0px;
  margin-left: 0px;
  margin-top: 55px;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  border-radius: 0 10px 10px 0;
  background-color: white;
  box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  -webkit-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.1);
}
.sideButton2:focus,
.sideButton2:active,
.sideButton2.active {
  /* background-color: rgba(191, 191, 191, 0.14); */
  background-color: blue;
}

.active_navbar {
  background-color: blue;
}
.leftMain {
  display: flex;
  flex-direction: row;
  padding-top: 40px;
}
.rightMain {
  display: flex;
  padding-top: 20px;
}
ul {
  list-style: none;
}
.navbar {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 2rem;
  overflow: hidden;
  z-index: 1;
  width: 80%;
  margin: auto;
  top: 0;
  border-bottom: solid 1px var(--primary-color);
  opacity: 0.9;
  position: relative;
  top: 0;

  /* box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25); */
  box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 8px -4px rgba(31, 73, 125, 0.8);
  box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white,
    12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 15px -4px rgba(31, 73, 125, 0.8);
}

.navbar ul {
  display: flex;
}
.navbar a {
  color: #2076d9;
  padding: 0.45rem;
  margin: 0 0.25rem;
}

.navbar a:hover {
  color: var(--primary-color);
}

.navbar .welcome span {
  margin-right: 0.6rem;
}
/* dashButton {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
dashButton::after {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
} */

@media (min-width: 768px) #dashboardpills .nav-item .nav-link {
  max-height: 42px;
  opacity: 0.25;
  color: #000;
  font-family: Poppins;
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
*,
::after,
::before {
  box-sizing: border-box;
}
user agent stylesheet li {
  text-align: -webkit-match-parent;
}
.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.titleName {
  font-family: Poppins;
}

.sideBarText {
  color: #000;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
}
.sideBarText2 {
  color: #000;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
}

.createNew {
  height: 40px;
  width: 153px;
  border: 0px;
  border-radius: 10px;
  /* background-color: #2076d9; */
  background-image: linear-gradient(
    to top,
    #d83f91,
    #d0409b,
    #c743a5,
    #bb47af,
    #ae4bb8
  );
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25);
}
.signOut {
  border: 0px;
  height: 40px;
  width: 100px;
  border-radius: 10px;
  background-image: linear-gradient(
    to right,
    #eb3941,
    #f15e64,
    #e14e53,
    #e2373f
  );
  box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25);
}

.mainCom {
  height: 56px;
  width: 68px;
  color: #000;
  font-family: Poppins;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  left: 0;
  cursor: pointer;
}
.mainComS {
  height: 42px;
  width: 255px;
  opacity: 0.25;
  color: #000;
  font-family: Poppins;
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
  cursor: pointer;
}
.mainComS2 {
  height: 42px;
  width: 200px;
  opacity: 0.25;
  color: #000;
  font-family: Poppins;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
  cursor: pointer;
}
.conMain {
  height: 130vh;
  margin-top: 20px;
  width: 100%;
  box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 8px -4px rgba(31, 73, 125, 0.8);
  box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white,
    12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 15px -4px rgba(31, 73, 125, 0.8);
}

ul {
  list-style: none;
}

li:hover {
  cursor: pointer;
}

You will get your all solution in it

You can change your class dynamically. Hitt the upvote if use like it.

Answer 2

Well, one of your ways to accomplish this, you can do is, make a state in your class, like:

state={mycolor:"red"};

And your button be like:

<button style={{color:this.state.mycolor}}
 onClick={()=>this.colorhandler()}>click here</button>

And in your class define your colorhandler

colorhandler(){
this.setState({mycolor:"blue"});
 }

And when you click on the button the color will change,

hope you get the idea and works for you

update If you want keep your CSS files you can change code like this:

state={myclassname:"btn active"};


< button class={ this.state.myclassname}
     onClick={ ()=>this.Classhandler()}> click here </ button>

Classhandler(){
this.setState({myclassname:"btn deactive"});
 }

Answer 3

You can create your own kind of link that would be in sync with url

import {
  Link,
  withRouter
} from "react-router-dom";

function NavInput({ value, className, to, location }) {
  let isActive = to === location.pathname;
  return (
    <Link to={to}>
      <input
        type="button"
        className={className + (isActive ? " active" : "")}
        value={value}
      />
    </Link>
  );
}

const NavInputLink = withRouter(NavInput);

and then your leftBox.js would be

export default class LeftBox extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <div className="nav">
          <ul>
            <li className="list-item">
              <NavInputLink
                to="/about"
                value="Dashboard"
                className="sideButton sideBarText"
              />
            </li>
            <li className="list-item">
              <NavInputLink
                to="/"
                value="People"
                className="sideButton2 sideBarText2"
              />
            </li>
          </ul>
        </div>
      </>
    );
  }
}

Please check https://codesandbox.io/s/cool-firefly-cq0hr

Answer 4

  
  $(document).ready(function(){

    $("li").click(function() {

      if($(this).siblings('li').find('input').hasClass('active')) {
        $(this).siblings('li').find('input').removeClass('active');
        $(this).find('input').addClass('active');
      }

    });

  });
  

li {
        list-style: none;
        padding-right: 20px;
        display: inline-block;
      }
      li .btn {
          padding: 7px 20px;
          background: #fff;
          border: 1px solid #000;
          font-size: 16px;
          color: #000;
          outline: none;
      }
      li .btn.active {
          color: #fff;
          background: #000;
          border: 1px solid #000;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <ul>
    <li>
      <input class="btn active" type="button" name="Button 1" value="btn1">
    </li>
    <li>
      <input class="btn" type="button" name="Button 3" value="btn2">
    </li>
  </ul>
</div>