CODEWITHSUNDEEP
cssbuttontwitter-bootstraphover
Atif
Atif

Reputation: 841

Twitter Bootstrap Button - Breaking background on hover

I am using Twitter Bootstrap on one of my sites. I am having trouble with the buttons. The background of all the buttons break on hover - on one page. But works fine on other pages.

Twitter button breaking on hover http://oi44.tinypic.com/wre2w5.jpg

Problem occurs in browsers like firefox, chrome and opera - but works fine on IE9

Addition Firebug css - Click on the link to view the image file - Firebug css

<div class="form-actions">
<button type="button" class="btn btn-primary" id="submit-calculations">Submit</button>
<button type="reset" class="btn">Cancel</button>
</div>

OK I have added the code to a demo server. Click on the following link to view the working example. Link removed

Upvotes: 0

Views: 1256

Answers (1)

Mimo
Mimo

Reputation: 6075

The reason you are experiencing this issue it's because you have the following CSS (around line 273 of style.css): 

.menu-toggle:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover {
    color: #5e5e5e;
    background-color: #ebebeb;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}

just remove it and everything should work as you expect.

Addition by OP - to the above Answer

Mark the following lines in bootstrap stylesheet as important

background-image: -moz-linear-gradient(top, #0088cc, #0044cc) !important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)) !important;
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc) !important;
background-image: -o-linear-gradient(top, #0088cc, #0044cc) !important;
background-image: linear-gradient(to bottom, #0088cc, #0044cc) !important;

Upvotes: 1

Related Questions