Wie man Bild als Knopf in HTML & CSS setzt?

Question

Ich habe einen Knopf, und ich mag ein Bild anstelle von einfachen Text setzen, so habe ich beschlossen, diese:

<ul class="signs"> 
    <li><button onclick="fadeOut('box1');"><img src="img/minus.png" alt="minus"/></button></li> 
</ul> 

Aber eine kleine Schachtel mit der Schaltfläche angezeigt wird um das Bild, so dass es nicht so gut ist. Irgendeine Idee, wie man das macht?

Answer 1

was ist daran falsch?

<ul class="signs"> 
    <li><img src="img/minus.png" alt="minus" onclick="fadeOut('box1');"/></li> 
</ul> 

Answer 2

Eine andere Lösung (Use background-image)

button { 
 
    background: red url('img/minus.png') no-repeat; 
 
    width: 100px; 
 
    height: 30px; 
 
    border: 0; 
 
} 
 

 
li { 
 
    list-style: none; 
 
}

<ul class="signs"> 
 
    <li><button onclick="fadeOut('box1');"></button></li> 
 
</ul>

Answer 3

die Standardstile der Schaltfläche Entfernen. Bild von here

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
button{ 
 
    border:none; 
 
    background: transparent; 
 
}

<ul class="signs"> 
 

 
    <li><button onclick="fadeOut('box1');"><img src="http://placehold.it/100x70/ff66cc/ffffff&text=icon1" alt="minus"/></button></li> 
 
</ul>