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

i using social buttons bootstrap add social buttons on web site. file css, using font awesome , has around 20+ classes defined various social networks. buttons, defined bootstrap social have hover , active effects.

what want disable hover/active effect, buttons become static, i.e. without hover/click functionality.

ideally, i'd have css class, "btn-static", cancel style changes coming hover/active effects.

is possible?

i avoid creating separate css class every social network, or modifying original css file. hoping add custom class cancel hover/active events.

for example, here 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 makes button have transparent background. want keep original color. somehow possible reference original color in css?

update #1: jsfiddler available

this hack:

.btn-static {   pointer-events: none; } 

according can use, supported. take @ known issues tab on page, won't scale many other uses.