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

我在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;
  }
}

最佳答案

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

 .btn-primary {
   color: white;
 }