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" %>

这是坏按钮之一：

<%= 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是 s。

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

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

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

在此处输入图像描述

当我将鼠标悬停在按钮上时，这就是我希望按钮的样子：

在此处输入图像描述

4

1 回答 1

1

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

它是通过background-image使用 移动梯度来完成的background-position，可以像这样删除：

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