Reset button style after 2nd click

user_17678225 0
Viewed 410

I have a button that is used to display/hide information. I have a style for when the information is displayed, and another for when it's hidden. So far, I manage to change the initial style when the button is clicked thanks to "button:focus", but then the style remains unchanged when it's clicked again. I would basically need the style to be switched between those two styles at every click. Can someone help me ?

This is my CSS style.


#button1 {
    height:50px;
    width:170px;
    border-style: solid;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 1px;
    font-family: "Roboto", serif;
    background-image: none;
    box-shadow: 2px 2px 8px 0 rgba(128,128,128,1);
    margin: 0 auto 0;
    border-color: white;
    color:white;
    background-color:rgb(4, 30, 78);
    border-radius: 30px;
  }

  #button1:hover {
    background-color: white;
    color:rgb(4, 30, 78);
    border-color:rgb(4, 30, 78);
    cursor:pointer;
  }

  #button1:focus{
    background-color: white;
    color:rgb(4, 30, 78);
    border-color:rgb(4, 30, 78);
    cursor:pointer;
  }
button css html
2 Answers

You can use javascript on the onclick event to modify the button classList, please check the sample below

#button1 {
    height:50px;
    width:170px;
    border-style: solid;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 1px;
    font-family: "Roboto", serif;
    background-image: none;
    box-shadow: 2px 2px 8px 0 rgba(128,128,128,1);
    margin: 0 auto 0;
    border-color: white;
    color:white;
    background-color:rgb(4, 30, 78);
    border-radius: 30px;
  }
  
  #button1.active {
    background-color: white;
    color:rgb(4, 30, 78);
    border-color:rgb(4, 30, 78);
    cursor:pointer;
  }
<button id="button1" onclick="this.classList.toggle('active')">Click Me</button>

Form more information please check Element.classList

user_84782200

First, let's clean your code a little:

#button1 {
  display: block; /* You need this, if the element is <a>*/
  
  /*
   * height: 50px;  padding-block:25px;
   * width: 170px;  padding-inline:85px; width:min-content;
   */
  width: min-content;
  padding: 25px 85px;
  /*
   * margin: 0 auto 0;
   1. You don't need the last 0
   2. in this example margin: auto is enough
   */
  margin: auto;

  /*
   * border-style: solid;
   * border-color: white;
    let's make them one
  */
  border: medium solid white;

  border-radius: 30px;

  /*
  * font-family: "Roboto", serif;
  Roboto is a sans-serif font, I'm not sure you notice that or not. If I where you, I would use 'sans-serif' as it's fallback
  ALSO
  we can use the "font" shorthand
  */
  font: 700 0.875rem "Roboto", sans-serif;
  
  color: white;
  letter-spacing: 1px;
  text-transform: uppercase;

  /*
   * background-image: none; You Don't need it
   */
  background-color: rgb(4, 30, 78);
  box-shadow: 2px 2px 8px 0 rgba(128, 128, 128, 1);
}

#button1:hover {
  background-color: white;
  color: rgb(4, 30, 78);
  border-color: rgb(4, 30, 78);
  cursor: pointer;
  /* cursor: pointer;  moved to #button1*/
}

#button1:focus {
  background-color: white;
  color: rgb(4, 30, 78);
  border-color: rgb(4, 30, 78);
  /* cursor: pointer;  moved to #button1*/
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
  </head>

  <body>
    <div>
      <a id="button1">cam_gis</a>
      <!-- It's better to use class UNLESS you pretty sure why are you going to use an id -->
    </div>
  </body>

</html>

Now, Let's talk about the :focus you used for "the initial style when the button is clicked"

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus.

MDN > :focus

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

MDN > :active

Thus, I think :active could be a better choice.

user_74217760
Related