CODEWITHSUNDEEP
htmlcss
dead beef
dead beef

Reputation: 683

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:

enter image description here

It looks like this:

enter image description here

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

enter image description here

hover.png

enter image description here

click.png

enter image description here

Upvotes: 0

Views: 186

Answers (3)

Daniel Jonce Evans
Daniel Jonce Evans

Reputation: 236

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');
}​

Upvotes: 0

Orville Patterson
Orville Patterson

Reputation: 524

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.

Upvotes: 1

smitelli
smitelli

Reputation: 7575

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

Upvotes: 1

Related Questions