css - Twitter Bootstrap button transition -

i'm experiencing rather annoying conflict twitter bootstrap.

when mouse on button css transition plays on hover out.

here's css:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');  .container {     margin-top: 10px; }  .btn-click-me {     color: white !important;     background: black !important;     -webkit-transition: background linear 350ms; }  .btn-click-me:hover {     background: white !important; } 

a working jfiddle demo can seen here: seen here: http://jsfiddle.net/mgcdu/3805/

its specificity issue in bootstrap.css - default buttons have transition - need include .container class in selector , you'll override bootstrap , see expected transition in both states. can alternatively modify default transition going line 3246 of bootstrap.css, transition on .btn:hover, .btn:focus classes

the reason 2 classes overrides 2 classes in case because when using @import conditional rule, imported css precedes css you've written in jsfiddle. if 2 selectors have same specificity latest 1 declared in stylesheet win

example

---

_{by 2 classes i'm referring to: .container .btn-click-me , .btn:hover, btn:focus equally specific}