はじめまして。皆様どうぞよろしくお願いいたします。
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で提供しているテーマなどでも構いません。
何卒よろしくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/24 14:46