IMG上不需要的按钮样式

Question

我想首先表示抱歉，因为我知道这可能是一个非常简单的解决方案，或者是一些我不知道的东西，因为你不能使用IMG作为按钮。

正如你所看到的那样，白色的边框不会消失。它应该只是一个白色的汉堡包形象。

我在这里缺少什么？

HTML：

<div class="mini-nav-menu">
    <button><img src="assets/menu.png"/></button>
</div>

CSS：

.mini-nav-menu {
    display: flex;
    padding-right: 30px;
    padding-top: 4px;
}

.mini-nav-menu img {
     width: 40px;
}

Answer 1

background: transparent;
border: 0;
outline: 0; // optional

这应该对你有帮助。

Answer 2

使按钮看起来像一个链接：

button {
 background:none!important;
 color:inherit;
 border:none; 
 padding:0!important;
 font: inherit;
 cursor: pointer;
}

Answer 3

可能会起作用试试这个：

.mini-nav-menu button {
     background:transparent;
     border:none;
     outline:none;
}

Answer 4

您必须在按钮html标记上修改或添加一些CSS属性。 请在按钮中添加一个课程。 （名称为 btn-class ）

HTML

<div class="mini-nav-menu">
    <button class="btn-class"><img src="assets/menu.png"/></button>
</div>

并为按钮类添加 CSS ：

.btn-class {
    border: 0;
    background: none;
    padding: 0;
}

它会起作用。