title: Adding ' active' to to html button doesn't apply the styles mentioned in the :active psuedo class
body: <p>On clicking a button I want its color to be inverted.</p>
  <p>Below is the html elements under concern:</p>
  <pre><code>    &lt;div class='chatbot-container'&gt;
        &lt;div class='chatbot-wrapper' id='chatbot-wrapper' style=&quot;display:none;&quot; &gt;
          &lt;iframe
            id=&quot;chatbot&quot;
            class=&quot;chatbot&quot;
            allow=&quot;microphone;&quot;
            src=&quot;https://console.dialogflow.com/api-client/demo/embedded/xxx-xxx-xxx&quot;&gt;&lt;/iframe&gt;
          &lt;/iframe&gt;
        &lt;/div&gt;
        &lt;button class='chat-btn' type=&quot;button&quot; onclick=&quot;toggleChatbot()&quot;&gt;Q&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  <p>So here is my style sheet:</p>
  <pre><code>.chat-btn {
      background: red;
      color: #fff;
      font-size: 32px;
      ....
      &lt;code snipped for brevity&gt;
      ...
  }
  .chat-btn:hover {
      background: #fff;
      color: red;
  }
  .chat-btn:active {
      background: #fff;
      color: red;
  }
  </code></pre>
  <p>Below is my script:</p>
  <pre><code>    &lt;script&gt;
        function toggleChatbot (chatBtn) {
          var x = document.getElementById(&quot;chatbot-wrapper&quot;);
          if (x.style.display === &quot;none&quot;) {
            x.style.display = &quot;block&quot;;
            chatBtn.className += ' active';
            console.log(chatBtn.active)
          } else {
            x.style.display = &quot;none&quot;;
            chatBtn.className = chatBtn.className.replace(&quot; active&quot;, &quot;&quot;);
            console.log(chatBtn.active)
          }
        }
      &lt;/script&gt;
  </code></pre>
  <p>So if you look at the below snapshot, 'active' is appended to the class as expected.
  But the css psuedo class style is not being applied.
  <a href="https://i.stack.imgur.com/ifrcZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ifrcZ.png" alt="enter image description here" /></a></p>