title: Button: Active using JavaScript and CSS
body: <p>Trying to make a simple button to be in an active, different style when it is clicked on. I am using HTML to lay out the button, CSS for styling, and hoping to use a bit of JavaScript to do so.</p>
  
  <p>After looking around SO and finding there are many different ways such as using Checkbox to make a button by pure CSS, or jQuery, or JavaScript, I feel that JavaScript is the most close way that I am looking at.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button type="button" class="btn" id="btn1"&gt;Details&lt;/button&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.btn {
    background: #3498db;
    border-radius: 0px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 2px 2px 2px 2px;
    text-decoration: none;
    height: 30px;
    width: 70px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
  }
  
  .btn:active {
    background: #cecece;
    text-decoration: none;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$('.btn').click(function(){
      if($(this).hasClass('active')){
          $(this).removeClass('active')
      } else {
          $(this).addClass('active')
      }
  });
  </code></pre>
  
  <p>Here is a jsfiddle link: <a href="http://jsfiddle.net/w5h6rffo/" rel="noreferrer">http://jsfiddle.net/w5h6rffo/</a></p>
  
  <p><strong>Additional Note</strong><br>
  Feature goal is to have multiple buttons with the same class but each button calling to a different functions. I have the calling of the functions working, just not the button staying at <strong><em>an active state when it is first pressed, then at an inactive state when it is pressed again</em></strong> </p>