How to remove the edge of the image?

3

I have this image:

1)

2)

that is being used with icon for <input> :

' <input type="button" class=" button_add" />'

With CSS I've added it to a li :

input.button_add {
    float: right;
    height: 40px;
    padding-left: 36px;
    background: url("../img/Arrow_Circle_Right-32.png") no-repeat;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

In point 2) you can check that the image has no borders, but in the final result the image appears like this:

Is it possible to make these borders disappear?

Thanks for the attention

    
asked by anonymous 28.05.2015 / 12:33

1 answer

3

You should use:

border: none;
background: url("../img/Arrow_Circle_Right-32.png") transparent no-repeat;

the transparent background is to prevent older sites from implementing color in bg .... A cool tip, is to right-click on the browser, on top of the object, go to inspect element and next, or underneath will display all his css, almost every modern browser allows you to manipulate the css of the input displayed, hence you can 'play' with the code, add parameter, remove, until it meets your need.     

28.05.2015 / 12:43