Question

当用户点击按钮时，如何使蓝色轮廓颜色为＃D5A021而不是蓝色？

我认为这可能与btn-primary

有关

HTML

<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a>

CSS

.btn-xl {
  padding: 1rem 2rem
}

.btn-primary {
  background-color: #D5A021;
  border-color: #D5A021;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  color: #fff;
  background-color: #D5A021!important;
}

Answer 1

您可以在任何需要的地方添加CSS outline-color 属性。

例如，

.btn-primary {
  background-color: #D5A021;
  border-color: #D5A021;
  outline-color: #D5A021;
}

Answer 2

我假设你要覆盖默认的Bootstrap类。如果是这种情况，那么下面的代码将按您的要求执行：

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

.btn-xl {
            padding: 1rem 2rem
        }
        .btn-primary, 
        .btn-primary:hover {
            background-color: #D5A021;
            border-color: #D5A021;
        }
        .btn-primary:active,
        .btn-primary:focus {
            color: #fff;
            background-color: #D5A021 !important;
            border-color: #D5A021 !important;
            box-shadow: 0 0 0 0.2rem rgba(213,160,33, 0.5) !important;
        }

<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a>

需要在Bootstrap 4中修改box-shadow属性。

如何更改按钮的轮廓颜色？

2 个答案: