引导按钮和链接的样式冲突

Question

我在ERB模板中使用了标签<%= link_to "Sign up!", signup_path, class: "btn btn-lg btn-primary" %>。它是链接，但具有按钮设计。

我使用引导程序，但是更改了按钮的默认颜色。

问题是我在scss文件中设置了链接的颜色。链接的颜色=按钮背景的颜色。

在其他地方则很好，因为文本和链接通常位于白色背景上。当我在表单中使用按钮作为常规提交按钮时，我也没有问题。

但是问题 仅此按钮 。

当我使用按钮和链接样式时，此按钮：

（当鼠标悬停并单击时-出现文本）

当我删除链接样式时，此按钮：

我想将此按钮设置为紫色并带有白色文本，并将其他链接保留为紫色。

我应该怎么解决这个问题？

我的文件的一部分在这里：

/app/assets/stylesheets/custom.css.scss

/* constants */
$bgDefault:   #9b59b6;
$bgHighlight: #8e44ad;
$bgHover:     #7f4496;
$bgActive:    #633575;
$bgDisabled:  #b07ec4;
$colHover:    #333;

/* buttons */
.btn-primary {
  background-color: $bgDefault;
  border-color: $bgHighlight;
    &:hover {
      background-color: $bgHover;
      border-color: $bgHighlight;
    }
    &:active, &:focus, &:active:hover, &:active:focus {
      background-color: $bgActive;
      border-color: $bgHighlight;
    }
}

.btn-primary.disabled {
  background-color: $bgDisabled;
  border-color: $bgHighlight;
}

.btn-primary.disabled:hover, .btn-primary.disabled:focus,
.btn-primary.disabled.focus, .btn-primary[disabled]:hover,
.btn-primary[disabled]:focus, .btn-primary[disabled].focus,
fieldset[disabled] .btn-primary:hover, fieldset[disabled]
.btn-primary:focus, fieldset[disabled] .btn-primary.focus {
  background-color: $bgDisabled;
  border-color: $bgHighlight;
}

/* links */
a {
  color: $bgDefault;
  &:visited {
    color: $bgDefault;
     }
  &:active {
    color: $bgActive;
  }
  &:hover {
    color: $colHover;
  }
}

Answer 1

您将需要在按钮中显式设置文本的颜色。试试这个：

 .btn-primary {
   color: white;
 }

Answer 2

我找到了决定。此错误是因为访问了该链接。

我添加了以下代码：

.btn:visited { 
  color: #fff
}

现在可以了。

也许对某人会有帮助。