Бутстрап 4 нажатой кнопки изменить цвет - PullRequest
0 голосов
/ 03 июня 2018

Я изменил класс начальной загрузки кнопки, изменил цвет кнопки, размер шрифта и т. Д. И т. Д.

Но когда я нажимаю кнопку и держу мышь, она меняет цвет.

Я установил зеленый цвет, но когда я нажимаю кнопку и удерживаю мышь, он становится синим.

Это код 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;
}

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Вот мое решение,

Так как вы сказали, что вы хотите использовать сплошную кнопку в комментариях,

Я использовал btn-primary класс для сплошных кнопок вместо btn-outline

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

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

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

.custom.btn-primary:active{
  background-color: #A4D555!important;
  outline: none;
  box-shadow: none;
  outline: none;
}
.custom.btn-primary:active:focus{
  background-color: #A4D555!important;
  outline: none;
  box-shadow: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<button type="button" class="btn btn-primary custom">Primary</button>
0 голосов
/ 03 июня 2018

Вы должны добавить !important для предотвращения переопределения по определению начальной загрузки

.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>


РЕДАКТИРОВАТЬ В КОММЕНТАРИИ:

, но по-прежнему есть синяя рамка / контуркогда я нажимаю и нажимаю


set:

box-shadow: none!important;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...