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

Tags: css,twitter-bootstrap

Problem :

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

I have tried using:

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


.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?

UPDATE #1: JSFiddler is available

Solution :

This is a hack:

.btn-static {
  pointer-events: none;

According to Can I Use, it is well supported. Take a look at the known issues tab on that page, as this won't scale to many other uses.

    CSS Howto..

    How to style nested panel controls in ASP.NET

    How to fade out and fade in the divs sequentially

    How to put images to the right and text to the left in css

    How can I code CSS to make Table like?

    How to indent multiple levels of select optgroup with CSS?

    How to stop Navigation bar list from changing position?

    How to remove/replace cached css and js file from client Browser?

    how decrease font size?

    how to change radio buttons style in h:selectOneRadio

    How to scrape a live java script webpage in R?

    How to dynamically scale images per height using pure CSS?

    CSS How to add content under fixed position navbar [closed]

    How to put a inside a

    without transpassing border height? [closed]

    How do I give a JavaFX TextField a Swing-style lowered bevel border?

    How to create an interactive image with HTML5, Javascript, DOM and CSS

    HTML & CSS: How to put quotation mark and text in same height?

    how to align div's horizontally in CSS

    how to disable one header among of multiple headers in jQuery table sorter

    How to prevent page from jumping on menu open?

    I have an text input inside a div, how do I get the background of the div to change when the input has focus?

    How to preload style image to use it when server is down?

    how to change the background colour of entire body except a sidebar div

    How to force text wrapping with floated elements

    How to change the size of item-avatar in ionic?

    How to stretch background image of a table cell with CSS?

    How to make sure the users see the new logo?

    How to apply css to LinkButton?

    How fix position element so that while hovering on one element other two element should remain at same place

    How to convert a specific part of materialize.scss to css

    How to add CSS to an if else statement in PHP