html - Bootstrap 4按钮按下改变颜色

Question

我更改了按钮的 bootstrap css 类，更改了按钮颜色、字体大小和字体颜色等。

但是当我按下按钮并按住鼠标时，它会改变颜色。

我将颜色设置为绿色，但是当我单击按钮并按住鼠标时，它会变成蓝色。

这是按钮的CSS代码

.btn-outline-primary{
  width: 220px;
  background: #A4D555; /*2cc8df*/
  border: none;
  color: white;
  font-weight:450;
}

.btn-outline-primary:hover{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

.btn-outline-primary:focus{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

.btn-outline-primary:active{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

Answer 1

您必须添加 !important 以防止被 Bootstrap 定义覆盖

.btn-outline-primary{
  width: 220px;
  background: #A4D555!important; /*2cc8df*/
  border: none;
  color: white;
  font-weight:450;
}

.btn-outline-primary:hover{
  background: #A4D555!important;
  outline: none;
  box-shadow: none!important;
}

.btn-outline-primary:focus{
  background: #A4D555!important;
  outline: none;
  box-shadow: none !important;
}

.btn-outline-primary:active{
  background: #A4D555!important;
  outline: none;
  box-shadow: none !important;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-outline-primary">Primary</button>

编辑您的评论:

but there is still a blue border/outline when i click and press

设置:

box-shadow: none!important;