CSS issue styling button

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:

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

smitelli · Accepted Answer · 2012-10-06 21:57:14Z

1

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

answered Oct 6, 2012 at 21:57

smitelli

7,6554 gold badges34 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dead beef Over a year ago

Thank you, is there any way to Style the button upon click?

smitelli Over a year ago

:hover will apply to the button anytime the mouse cursor is over it. :active will apply to the button as long as the mouse button is held down on it.

Orville Patterson · Accepted Answer · 2012-10-06 22:04:33Z

1

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.

answered Oct 6, 2012 at 22:04

Orville Patterson

5244 silver badges20 bronze badges

Comments

Daniel Jonce Evans · Accepted Answer · 2012-10-13 15:51:17Z

0

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

edited Oct 13, 2012 at 15:51

answered Oct 6, 2012 at 22:08

Daniel Jonce Evans

2363 silver badges13 bronze badges

1 Comment

smitelli Over a year ago

none is not a valid CSS color value. You want transparent instead. developer.mozilla.org/en-US/docs/CSS/color_value

Collectives™ on Stack Overflow

CSS issue styling button

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related