How to cancel/disable hover and active effects coming from another CSS library?

I am using Social Buttons for Bootstrap 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.

What I want to do is disable hover/active effect, so the buttons would become static, i.e. without any hover/click functionality.

Ideally, I'd like to have some CSS class, say "btn-static", which would cancel style changes coming from hover/active effects.

Is this even possible?

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.

For example, here is the button defined:

<span class="btn btn-social btn-facebook">
    <span class="fa fa-facebook"></span>Facebook
</span>

I have tried using:

.btn-static:active, .btn-static:hover { background-color: none; }

and

.btn-static:active, .btn-static:hover { background-color: inherit; }

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?

Social Buttons for Bootstrap CSS file can be found here: http://raw.githubusercontent.com/lipis/bootstrap-social/gh-pages/bootstrap-social.css