如何删除引导程序4按钮点击效果

Question

我一直面临着删除bootstrap 4框阴影按钮效果的问题，我确实在这里阅读了其他用户提出的一些问题，但找不到解决我问题的方法。所以我试着使用我从一个网站上得到的一些CSS代码，我成功地从我的按钮上删除了蓝框阴影效果(点击时(，但我注意到，每当在我的网站上点击按钮时，按钮都会被调整大小，并设置回我不喜欢的正常大小。

我的css

#ok_but {
background-color: #50506F;
border-color: #50506F;
}
#ok_but:hover   {
background-color: #3C3C52;
}
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
outline: 0;
}

我的html

<button id="ok_but" class="btn btn-primary btn-block" name="login">
Login
</button>

Answer 1

我希望这段代码能帮助您解决问题。如果你仍然面临同样的问题，请给我链接并点击出现问题的地方，我会检查的。祝你一切顺利！快乐代码：(

.btn-primary:hover,.btn-primary:focus,.btn-primary:active, 
.btn-primary:active:focus:not(:disabled):not(.disabled),
.btn:focus, .btn:active, .btn:hover{
box-shadow: none!important;
outline: 0;
}

Answer 2

您不需要编写额外的CSS类或使用基本的Bootstrap。您可以向按钮添加shadow-none类。因此，您不必失去默认的Bootstrap外观。这样做：

<button id="ok_but" class="btn btn-primary btn-block shadow-none" name="login">
Login
</button>

但是，如果你想覆盖默认的Bootstrap，我建议你修改Bootstrap SCSS中的变量，或者使用Bootstrap类实用程序(像Tailwind CSS框架一样组成(，或者，在最后一种情况下，重写Bootstrap类如.btn等。如果你无法访问Bootstrap的SCSS，我的意思是，如果你在HTML文件中包含Bootstrap.css文件，并且你想覆盖默认的Bootstrap行为，那么就覆盖编译的SCSS类，就像Bharat Makvana在回答中所说的那样。

Answer 3

这是您想要的吗？https://jsfiddle.net/Nethravathi/zsm54ptw/6/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

登录

#ok_but:hover{
background-color: #007bff;
border-color: #007bff;

}