CSS issue styling button

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