Revert button design to default after second click

Question

Revert button design to default after second click

Looking for some assistance here. I have a button that toggles between displaying and hiding information. When the information is displayed, it should have one style, and when it's hidden, it should have another. Currently, I'm able to change the style when the button is clicked using "button:focus", but the style doesn't switch back when the button is clicked again. Is there a way to toggle between the two styles every time the button is clicked? Any help would be appreciated.

Below is my CSS code for the button:


#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;
  }

html css button

Answer 1

Answer №1

If you want to change the button's class using JavaScript when it is clicked, you can achieve this by following the example provided 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>

For more detailed information, please refer to Element.classList

Answer 2

If you want to change the button's class using JavaScript when it is clicked, you can achieve this by following the example provided 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>

For more detailed information, please refer to Element.classList

Answer 3

Answer №2

Before we proceed, let's tidy up your code:

#button1 {
  display: block; /* Required 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. The last 0 is unnecessary
   2. For this example, margin: auto suffices
   */
  margin: auto;

  /*
   * border-style: solid;
   * border-color: white;
   👉🏻 Let's combine them into one line
  */
  border: medium solid white;

  border-radius: 30px;

  /*
  * font-family: "Roboto", serif;
  Roboto is a sans-serif font, consider using 'sans-serif' as fallback
  ALSO
  utilize the "font" shorthand
  */
  font: 700 0.875rem "Roboto", sans-serif;
  
  color: white;
  letter-spacing: 1px;
  text-transform: uppercase;

  /*
   * background-image: none; Not needed
   */
  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;
  /* Move cursor: pointer to #button1*/
}

#button1:focus {
  background-color: white;
  color: rgb(4, 30, 78);
  border-color: rgb(4, 30, 78);
  /* Move cursor: pointer 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>
      <!-- Consider using class unless you have specific reasons for an id -->
    </div>
  </body>

</html>

Now, let's discuss the :focus pseudo-class you used for "the initial style when the button is clicked"

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

MDN > :focus

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

MDN > :active

Hence, I believe :active might be a more suitable choice.

Answer 4

Before we proceed, let's tidy up your code:

#button1 {
  display: block; /* Required 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. The last 0 is unnecessary
   2. For this example, margin: auto suffices
   */
  margin: auto;

  /*
   * border-style: solid;
   * border-color: white;
   👉🏻 Let's combine them into one line
  */
  border: medium solid white;

  border-radius: 30px;

  /*
  * font-family: "Roboto", serif;
  Roboto is a sans-serif font, consider using 'sans-serif' as fallback
  ALSO
  utilize the "font" shorthand
  */
  font: 700 0.875rem "Roboto", sans-serif;
  
  color: white;
  letter-spacing: 1px;
  text-transform: uppercase;

  /*
   * background-image: none; Not needed
   */
  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;
  /* Move cursor: pointer to #button1*/
}

#button1:focus {
  background-color: white;
  color: rgb(4, 30, 78);
  border-color: rgb(4, 30, 78);
  /* Move cursor: pointer 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>
      <!-- Consider using class unless you have specific reasons for an id -->
    </div>
  </body>

</html>

Now, let's discuss the :focus pseudo-class you used for "the initial style when the button is clicked"

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

MDN > :focus

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

MDN > :active

Hence, I believe :active might be a more suitable choice.

Revert button design to default after second click

Answer №1

Answer №2

Similar questions

Unable to implement Bootstrap 5 Hamburger Animation - Looking for solutions

Ways to make the background color white in Bootstrap 5

Is the background image unable to fill up the entire screen?

Discover the following input

Top method for converting scrolling into an element

The three.js library is throwing an error because it is unable to access the 'geometry' property of an

TinyMCE: Tips for adding and highlighting text in your content!

What is the best way to reduce the spacing between subplots?

Error encountered when attempting to reinitialize DataTable while iterating through multiple tables and searching within tabs

Resetting the quiz by utilizing the reset button

Tips for adding additional rows or cells to a table with jQuery

Exclude the footer from the index.html file by configuring it in the docusaurus.config.js file

In what ways can I incorporate Django template tags into my JavaScript code?

Is concealing content using Javascript or jQuery worth exploring?

Images with full-width will scroll horizontally

Restrict the display of items in a unordered list element

Converting Rich Text Format (RTF) Data to HTML: A Step-by

Implement a vertical background sprite animation using jQuery along with a mask

Issue with flash installation

Trying to understand the strange behavior of HTML parsing with jQuery in Javascript and Firefox