How to remove Input image border

Your problem occurs because input type="image" expects that there is a src attribute, that is, the image definition must be done directly on the button, which means :hover does not have the correct effect , because the background image will be "behind" the src image.

To solve your problem, simply change the input to submit and continue using the :hover images you already have in css.

Looking like this:

<input type="submit" class="btnFav" title="Favoritar" value="" />

I put the attribute of value with no value so that the default "Send" script does not stay behind the image.

Note also that all input types have standard css that apply border and outline, to get rid of completely, just remove those properties directly in the input css, like this:

input[type="submit"] {
    border: none;
    outline:none;
}

Or just

input {
    border: none;
    outline:none;
}

See the example working: link

Try the following

input[type="image"]{
    outline: none;   
}

input[type="image"]:focus{
    outline: none;   
}

Good luck, any questions ask via comment

I did the tests on the link that passed me and no css is needed to solve the problem, do the following:

<div class="btnFav" title="Favoritar" />

Switch input to div and everything is fine