Question

我一直面临着删除bootstrap 4 box-shadow button效果的问题，我确实在这里阅读了其他用户提出的一些问题，但是找不到解决我问题的方法。因此，我尝试使用从站点获得的一些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

这是您想要的吗？ 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;

}

Answer 3

您不需要编写额外的CSS类或遍历基本的Bootstrap。您可以向该按钮添加一个没有阴影的类。因此，您不必失去默认的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在他的答案。

如何删除Bootstrap 4按钮点击效果

3 个答案: