title: All of my CSS transitions end abruptly on mouse out
body: <p>I can never get my CSS transitions to work on mouse out/off hover. It works fine on hover but not the other way around.</p>
  
  <pre><code>.btn {
      border: 1px solid #5a5350;
      background: #FFF;
      color: inherit !important;
      padding: 3px 10px;
      display: inline-block;
      font-weight: bold;
      text-transform: uppercase;
      -webkit-transition: background 0.5s ease-in-out;
      -moz-transition: background 0.5s ease-in-out;
      -o-transition: background 0.5s ease-in-out;
      transition: background 0.5s ease-in-out;
  }
  
  .btn:hover {
      color: #FFF !important;
      background: #f79e43;
      border: 1px solid #f79e43;
  }
  </code></pre>
  
  <p>What's the problem with my code?</p>
  
  <p>Thanks</p>