Do not change CSS when hovering over the download button

Question

I use btn-group as follows: http://jsfiddle.net/dy9uH/34/

I don’t want my users to think that the button on the left has a click, but I don’t like what the button looks like when adding the disabled class. How can I make sure nothing happens when the user hovers over the left button? I would prefer not to edit bootstrap.css, because I have other buttons that use the .btn-group class, which I need to work fine.

Answer 1

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

• Add custom class to btn ex: special
• Define an override style as follows in a custom css file
• Include a custom file on 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

Answer 2

I'm going to suggest that you want to use disabled, so the button is actually disabled. You will need to override some boot file

I would do the following

HTML

 <div class="btn-group"> <button class="btn special" disabled>I'm Special</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <!-- dropdown menu links --> </ul> </div> 

CSS

 .special, .special.disabled, .special[disabled] .special.disabled:hover, .special[disabled]:hover, .special.disabled:focus, .special[disabled]:focus { display: inline-block; *display: inline; padding: 4px 12px; margin-bottom: 0; *margin-left: .3em; font-size: 14px; line-height: 20px; color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; cursor: pointer; background-color: #f5f5f5; *background-color: #e6e6e6; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6) !important; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)) !important; background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6) !important; background-image: -o-linear-gradient(top, #ffffff, #e6e6e6) !important; background-image: linear-gradient(to bottom, #ffffff, #e6e6e6) !important; background-repeat: repeat-x !important; opacity: 1 !important; filter: alpha(opacity=100) !important; background-position: 0 0; -webkit-transition:none; -moz-transition:none; -o-transition: none; transition: none; border: 1px solid #cccccc; *border: 0; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-bottom-color: #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } 

Pay attention to the disabled selector.

HOWEVER , no one will be surprised that this is partially supported by IE!

Fiddle

Answer 3

Well, you can add a class to this particular button so that it does not crash with others and does not overwrite a disabled class, this would be the easiest way.