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

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

我假设您希望覆盖默认的 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>

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