HOW TO highlight a button when another button is clicked

Question

I have two buttons on a page. I styled the second button with CSS to kind of shine in a light grey. Now I want to add some event (I guess with JS?) which only highlights the second button, after the first button has been clicked on.

    <button class="tempo1" type="button" onclick="buttonShow()">Datenschutzerklärung</button> 

<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">

TEXT
  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>

<!-- Der JavaScript-Code -->

<style>

.tempo1 {
  background-color: #A4A4A4;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

.tempo1:focus {outline:0;}

@-webkit-keyframes glowing {
  0% { background-color: #848484; -webkit-box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; -webkit-box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; -webkit-box-shadow: 0 0 3px #848484; }
}

@-moz-keyframes glowing {
  0% { background-color: #848484; -moz-box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; -moz-box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; -moz-box-shadow: 0 0 3px #848484; }
}

@-o-keyframes glowing {
  0% { background-color: #848484; box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; box-shadow: 0 0 3px #848484; }
}

@keyframes glowing {
  0% { background-color: #848484; box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; box-shadow: 0 0 3px #848484; }
}
}

</style>

Basically I want to put a condition on the button (class=temp1) in the top line. The CSS code below should just be activated if another button (I havent listed the code for this button here) is clicked. Also, I would appreciate any advice if there is a way to style a button in a similar way with less code. If the idea behind it or my question are not clear enough, please ask :)

Thanks for your time and help!

Answer 1

you can achieve this in js by listening to click events on the first button, and adding the 'glow' class to the 2nd button, like so:

 //select btn1, and listen to click events on it var btn1 = document.getElementById("btn1"); btn1.addEventListener("click", addGlow); //the function addGlow, adds the glow class to btn2 function addGlow() { var btn2 = document.getElementById("btn2"); btn2.classList.add("glow"); } 

 button{ width:100px; height:50px; background-color:grey; border-radius:5px; border:none; } .glow{ background-color: cyan; } 

 <button id="btn1">button 1</button> <button id="btn2">button 2</button> 

note that this code only adds the css glow class, if you want the button to 'turn off' at some point, you'll need to remove the glow class, which can be done like so: btn2.classList.remove("glow");

hope this helps :)