Question

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.

Answer 1

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

1. Add a custom class to the btn ex: special
2. Define the override style as follows in a custom css file
3. 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