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

Error in Chrome: Text container's height is not fully extended to 100%

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

Can someone please explain to me why the Transition effect is not functioning properly for input:checked::before?

Activate a button only when a value is inputted into a text box associated with a chosen radio button

"Drag and drop elements that automatically snap to a grid and move with

displaying the identical image from various perspectives

How to keep child elements in BeautifulSoup using Python?

Is it possible to alter the name of a slot before displaying the element in the shadowDOM, depending on the slot utilized in the DOM?

What is causing the qtip tooltip to show up on buttons with different ids?

Custom container width causes animation to crash when scrolling

Tips for creating a unique custom rounded underline effect in an Angular Material Tab

Retrieving the value of a specific image using Jquery

How can the parent div be made transparent without affecting the child div's visibility?

Manipulating classes within ng-class in AngularChanging classes in ng-class dynamically

Gain command over the underline style of text without relying on the border property

How to customize the active color of the navigation pills in Bootstrap 4

My images seem to lose control and go completely wild when I try to turn them into hyperlinks

What steps can be taken to safeguard the title of the document in the top window from being altered by any iframe or script?

Tips for retrieving formatted text layout from the database