Why has HTML Button with Background Image an UGLY rendering?

Question

<input type="button" value="Nice" />
<input type="button" value="Ugly"
style="background-image:url('https://i.stack.imgur.com/M8lk7.png');
background-repeat:no-repeat;
background-position:left center;
padding-left:150px;
height:160px" />

Have a look: https://jsfiddle.net/pbgmzp7j/

Is there a workaround?

Answer 1

Try it without the input and use button

<button>
    <img src="https://i.stack.imgur.com/M8lk7.png"/>
</button>

JSFiddle

Answer 2

try this

background-color:transparent;
border:none;

or you can use any color in bg. demo

Answer 3

use:

css border:none; DEMO

<input type="button" value="Nice" />
<input type="button" value="Ugly" style="background-image:url('https://i.stack.imgur.com/M8lk7.png'); background-repeat:no-repeat; background-position:left center; padding-left:150px; height:160px; border:none;" />

UPDATE:

DEMO