Bootstrap3 _theme.scss のボタンに transitionをキレイに適用したい

Question

はじめまして。皆様どうぞよろしくお願いいたします。

Bootstrap3をベースとしたWordPressテーマにて、自社Webサイトを構築中です。
現状、CSSでの管理が煩雑になってきており、Sassでのカスタマイズ移行をテストしております。

Bootstrap+Sass環境の経験が浅く、どなたがご教示頂けないかと思い、質問いたしました。

下記ボタンのみのデモページ、右上のオレンジのボタンをご確認いただけますでしょうか。

http://naohendrix.github.io/demo151124/

Bootstrapにデフォルトで入っている "_theme.css" を読み込み、a要素に transition を適用したのですが、hover時、下部のグラデーションに白っぽい色が混ざってしまい、ふわっとした感じが出ず困っております。

a要素ではなく .btnクラスに transition を適用してみましたが、変化はなく同じ動きでした。
少しグラデーションを調整してみたのですが、グラデーションプロパティにあまり詳しくなく、加えて不慣れなSassでのカスタマイズのため、完全に行き詰ってしまいました。。

［HTML］
<!-- ブランドロゴ -->
<div class="container">
    <div class="row row-inlineblock row-20" style="height:70px;">
        <div class="col-sm-3">
            <a href="#"><img src="<?php echo site_url(); ?>/images/common/logo.png" alt=""></a>
        </div>
        <div class="col-sm-3 col-sm-offset-3">
            <img src="<?php echo site_url(); ?>/images/common/tel.png" alt="電話番号">
        </div>
        <div class="col-sm-3">
            <a href="#" class="btn btn-warning btn-block"><i class="fa fa-comments-o"></i> 資料請求・体験授業</a>
        </div>
    </div>
</div>

［sass］
// _content.scss：オリジナル追記scss
a {
    @include transition(all .2s ease-in-out);
}

// _theme.scss より抜粋
// Mixin for generating new styles
@mixin btn-styles($btn-color: #555) {
  @include gradient-vertical($start-color: $btn-color, $end-color: darken($btn-color, 12%));
  @include reset-filter; // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
  background-repeat: repeat-x;
  border-color: darken($btn-color, 14%);

  &:hover,
  &:focus  {
    background-color: darken($btn-color, 12%);
    background-position: 0 -15px;
  }

  &:active,
  &.active {
    background-color: darken($btn-color, 12%);
    border-color: darken($btn-color, 14%);
  }

  &.disabled,
  &:disabled,
  &[disabled] {
    background-color: darken($btn-color, 12%);
    background-image: none;
  }
}

// Common styles
.btn {
  // Remove the gradient for the pressed/active state
  &:active,
  &.active {
    background-image: none;
  }
}

// Apply the mixin to the buttons
.btn-default { @include btn-styles($btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.btn-primary { @include btn-styles($btn-primary-bg); }
.btn-success { @include btn-styles($btn-success-bg); }
.btn-info    { @include btn-styles($btn-info-bg); }
.btn-warning { @include btn-styles($btn-warning-bg); }
.btn-danger  { @include btn-styles($btn-danger-bg); }

意図したい見本として、下記サイトのhover時のような動きにしたいと思っております。

http://charliepark.org/bootstrap_buttons/

できれば、単純なCSSの追記ではなく、Sassの変数やミックスインを使い、極力管理しやすいカスタムをしたいと考えております。
また最近の時流に反し、自社内ではフラットデザインがあまり好まれておらず、ボタン系にはグラデーションの使用が前提です。。

極力Bootstrap3のソースを修正せずに、自然な transition を適用する方法を、どなたかご教示頂けませんでしょうか。
上記サイトのようなボタンを、Sassで提供しているテーマなどでも構いません。
何卒よろしくお願い致します。

Answer 1

↓の画像を確認ください。
必要なファイルが読み込まれていません。

Comments

[NaohiroIchinari]

早速のご回答、誠にありがとうございます。
こちらのファイルはデモページの方には搭載しておらず、ローカル内のインポート用scssには記述されております。
動作はローカル・デモに変化はないため、おそらくこのファイルが原因でないと思いますが、念のため再チェックさせていただきます。
ご指摘、誠にありがとうございます。

ちなみにローカル環境は、Bootstrapベースの「Habakiri」というWordPressテーマを利用させて頂いております。

/* ------------------------------------------------- *
* Original Settings
* ------------------------------------------------- */
@import './src/js/jquery.responsive-nav/jquery.responsive-nav.css';
@import './src/js/slick/slick.css';
@import 'mixin';
@import 'layout';
@import 'content';