Question

In my CSS I tried to mask a button’s look by adding a background like this:

input[type=button]
{
background-image:url('../images/next-button.png');
background-position:0px;
background-repeat: no-repeat;
height:60px;
width:120px;
outline: 0;

}

input[type=button]:hover
{
background-position: 0px -66px;
}
input[type=button]:active
{
background-position: 0px -132px;
}

the new background shows up, but there is still a gray border around the background from the button itself. how do i remove this? The background image is a transarent PNG so I know this outline isn’t from the image I’m using.

here is the HTML for the button

<input type="button" id="submit1" />

Thanks a bunch!

!–EDIT–

This is the proper way to do it! thanks for the answers guys!
CSS:

input[type=button]
{
border: none ;
background-image:url('../images/next-button.png');
background-position:0px;
background-repeat: no-repeat;
height:60px;
width:120px;
outline: 0;

}

input[type=button]:hover
{
background-position: 0px -66px;
}
input[type=button]:active
{
background-position: 0px -132px;
}

.next_btn{
border: none ;
color:#FFFFFF;
background-color:#FFFFFF;
}

and the HTML:

<input type="button" class="next_btn" id="submit1"/>

Answer 1

Try adding in

border: none

as an attribute for input[type=button].