css - 防止我的按钮在悬停时改变颜色

Question

我有非常漂亮的按钮，我很满意，但是一旦用户点击一个按钮，它就会改变文本的颜色以及悬停在按钮上时的行为方式。我用这个生成器来构建按钮: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" %>

这是坏按钮之一:

<%= 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;
}

我还了解到，这不仅适用于之前点击过的链接，而且似乎所有不是 submit_tag 的按钮。

此外，我的导航栏折叠按钮也在做同样的事情，但更改为导航栏的颜色:

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

这是我单击一次后悬停按钮时的样子:

当我将鼠标悬停在按钮上时，我希望它看起来像这样:

Answer 1

您看到的悬停背景是 Bootstrap 添加到按钮的 background-image 背景效果，使按钮看起来像 3d..ish。 您可以通过简单地删除 .btn-custom-primary 类中的 background-image 效果来解决这个问题，如下所示:

这是通过使用 background-position 移动渐变来移动 background-image 完成的，可以像这样删除:

.btn-custom-primary {
    background-position: 0 center;
}