Do not change CSS when hover over bootstrap button

css, jquery, twitter-bootstrap

Solution

I think the only solution is to over ride the bootstrap styles with your custom changes.

- Add a custom class to the `btn` ex: `special`

- Define the override style as follows in a custom css file

- Include the custom file in your page

Css:

.btn.special {
    background-color: #F5F5F5;
    color: #333333;
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    text-decoration: none;
    background-position: 0;
    transition: none;
}

Demo: Fiddle

Problem

I am using a `btn-group` like this: http://jsfiddle.net/dy9uH/34/ I don't want my users to think the button to the left is click-able but don't like how the button looks when I add the `disabled` class. How can I make sure nothing happens when a user hovers over the left button? I'd prefer not to edit bootstrap.css because I have other buttons that utilize the `.btn-group` class that I need functioning as usual.

Original source