title: How to cancel/disable hover and active effects coming from another CSS library?
body: <p>I am using <a href="https://lipis.github.io/bootstrap-social/" rel="nofollow">Social Buttons for Bootstrap</a> to add social buttons on my web site. The file is basically a CSS, which is using Font Awesome and has around 20+ classes defined for various social networks.
  Buttons, defined with Bootstrap Social have hover and active effects.</p>
  
  <p>What I want to do is disable hover/active effect, so the buttons would become static, i.e. without any hover/click functionality.</p>
  
  <p>Ideally, I'd like to have some CSS class, say "btn-static", which would cancel style changes coming from hover/active effects.</p>
  
  <p>Is this even possible?</p>
  
  <p>I would like to avoid creating separate CSS class for every social network, or modifying original CSS file. Hoping to add custom class which could cancel hover/active events.</p>
  
  <p>For example, here is the button defined:</p>
  
  <pre><code>&lt;span class="btn btn-social btn-facebook"&gt;
      &lt;span class="fa fa-facebook"&gt;&lt;/span&gt;Facebook
  &lt;/span&gt;
  </code></pre>
  
  <p>I have tried using:</p>
  
  <pre><code>.btn-static:active, .btn-static:hover { background-color: none; }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>.btn-static:active, .btn-static:hover { background-color: inherit; }
  </code></pre>
  
  <p>But that just makes the button have transparent background. I want it to keep original color. Is it somehow possible to reference the original color in CSS?</p>
  
  <p><strong>UPDATE #1:</strong> <a href="https://jsfiddle.net/EVMX/t044se5j/" rel="nofollow">JSFiddler</a> is available</p>