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

您必須修改或在您的按鈕的HTML標籤添加一些CSS屬性。 請添加一個班級到按鈕。 （讓名BTN級）

您HTML

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

，並添加CSS Button類：

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

它將工作。

Answer 2

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

這會幫助你。

Answer 3

化妝按鈕看起來像一個鏈接：

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

Answer 4

可能它會工作試試這個：

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