0

私は満足している非常に素晴らしいボタンを持っていますが、ユーザーがボタンをクリックすると、テキストの色とホバーしたときのボタンの動作が変わります。このジェネレーターを使用してボタンを作成しました: http://twitterbootstrapbuttons.w3masters.nl/?color=%236f7578

これが私のボタンCSSです：

.btn-custom-primary {
  background-color: hsl(0, 0%, 47%) !important;
  background-repeat: repeat-x !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#777777", endColorstr="#777777");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#777777), to(#777777));
  background-image: -moz-linear-gradient(top, #777777, #777777);
  background-image: -ms-linear-gradient(top, #777777, #777777);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, #777777)) !important;
  background-image: -webkit-linear-gradient(top, #777777, #777777) !important;
  background-image: -o-linear-gradient(top, #777777, #777777) !important;
  background-image: linear-gradient(#777777, #777777) !important;
  border-color: #777777 #777777 hsl(0, 0%, 47%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.00);
  -webkit-font-smoothing: antialiased;
  webkit-font-smoothing: antialiased;
}

ボタンが機能する例を次に示します。フォームにsubmit_tag添付されています：

 <%= submit_tag 'Login', :class => "btn btn-custom-primary login-button" %>

悪いボタンの 1 つを次に示します。

<%= link_to "Sign up", new_user_path, :class => "btn btn-custom-primary signup-button" %>

各ボタンの追加クラスは、間隔のためだけです:

.login-button, .create-account-button, .signup-button {
  margin-left: 5px;
  float: left;
}

また、これは以前にクリックされたリンクだけでなく、 s ではないすべてのボタンのように見えることもわかりましたsubmit_tag。

さらに、私の navbar-collapse ボタンは同じことをしていますが、navbar の色に変わります:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

ボタンを 1 回クリックした後にホバーすると、ボタンは次のように表示されます。

ここに画像の説明を入力

これは、ボタンをホバーしたときにボタンを次のように表示したいものです。

ここに画像の説明を入力

4

1 に答える 1

1

表示されているホバー バックグラウンドは、background-imageブートストラップがボタンに追加する背景効果で、ボタンが 3D に見えるようにします。次のように、クラスのbackground-image効果を削除するだけでこれを克服できます。.btn-custom-primary

background-imageこれは、を使用してグラデーションをシフトすることにより、 の変位によって行われます。これは、次のbackground-positionように削除できます。

.btn-custom-primary {
    background-position: 0 center;
}
于 2013-09-15T18:50:06.230 に答える