title: How to toggle button:active when triggering a click event on that button?
body: <p>I have a button that when pressed changes the html content of a div. I have also a jQuery function that triggers a click on that button when pressing the keyboard 'A' key.</p>
  
  <p>The function works partially as I was expecting. When I press 'A' the content of the div changes but the style of the button does not change as into button:active style (when clicking directly on the button everything works fine).</p>
  
  <p>I would like to have the exact same effect on key press as when clicking the button itself, <strong>including the style change</strong>.</p>
  
  <p><em>html</em></p>
  
  <pre><code>&lt;button type="button"&gt;Click Me&lt;/button&gt;
  &lt;div id="button-state"&gt;not clicked&lt;/div&gt;
  </code></pre>
  
  <p><em>css</em></p>
  
  <pre><code>button {
      width: 50px;
      height: 50px;
      border-radius: 5px;
  }
  
  button:active {
      border-color: red;
      color: red;
  }
  </code></pre>
  
  <p><em>js (jQuery)</em></p>
  
  <pre><code>$(":button").click(function() {
    $("#button-state").html("button was clicked");
  });
  
  //trigger click when pressing 'A' 
  $(document).keypress(function(e) {
    if(e.which == 97) {
      $(":button").trigger('click');
    }
  });
  </code></pre>
  
  <p>Fiddle <a href="http://jsfiddle.net/L975nf6r/" rel="nofollow">here</a> (be sure to click on the 'Result' window to test the key press).</p>