CSS issue styling button - html

Question

I'm attempting to style a button with CSS. Here is the HTML code for the button:
<button class='custombtn' name="doLogin" type="submit" id="doLogin3" value="Login">Login</button>
Here is the CSS code.
.custombtn {
width:163px;
height:43px;
background-image:url('images/normal.png');
background-color:#d3d3d3;
}
.custombtn:hover {
background-image:url('images/hover.png');
}
.custombtn:active {
background-image:url('images/click.png');
}
I thought everything was fine & dandy, until I viewed the results.
Instead of something like this with text on it:
It looks like this:
I've been reading fixes for these online for around an hour and a half, however none of them have worked. I know it's possible to style it to look like this, I just need to find a way.
normal.png
hover.png
click.png

Answer 1

You need to explicitly set border:none; background-color:transparent; on .custombtn.

Answer 2

You need to set the border to none. That should definitely solve the problem and make sure there is no white space in the image itself.

Answer 3

I think the button's background and borders are the cause of your headache.
Try something like this:
.custombtn {
margin: 10px;
width:163px;
height:43px;
background-image:url('images/normal.png');
background-color: transparent;
border: none;
}
.custombtn:hover {
background-image:url('images/hover.png');
}
.custombtn:active {
background-image:url('images/click.png');
}​