Image background and text for input submit button - CSS

Question

I'm trying to make a button for my form which has an image background and displays the text on top of the background. Seems very simple but I'm struggling to get the text to appear no matter what I try and struggling after an hour of searching to find someone with a similar problem so assume I'm doing something stupid!.

Here's my CSS:

#detail-left .cart-button {
    background : url("../graphics/cart-button.png");
    border : none;
    color : transparent;
    height: 48px;
    width: 118px;
    padding: 10px;
    line-height: 48px;
}

and my html:

<input class='cart-button' type='submit' value='Add' />

SVS · Accepted Answer · 2012-06-24 07:36:01Z

3

Remove color:transparent. Its making your text transparent give it some color.

answered Jun 24, 2012 at 7:36

SVS

4,2651 gold badge25 silver badges28 bronze badges

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

1 Comment

SVS Over a year ago

No, Problem. Actually i am not able to submit my answer by just writing "Remove color:transparent" so it takes time to think what else to write to make it submit :-)

Umesh Aawte · Accepted Answer · 2012-06-24 07:35:59Z

2

Remove color : transparent; from your style class, That should work

#detail-left .cart-button {
    background : url("../graphics/cart-button.png");
    border : none;
    height: 48px;
    width: 118px;
    padding: 10px;
    line-height: 48px;
}

Try this working fiddle

answered Jun 24, 2012 at 7:35

Umesh Aawte

4,7007 gold badges44 silver badges52 bronze badges

1 Comment

Alpaus Over a year ago

Thank you, this did the trick. At least I was correct about one thing - stupidity!

monkeymad2 · Accepted Answer · 2012-06-24 07:41:44Z

2

The "color : transparent;" setting will cause the text to be completely transparent, if you want the text to have half-transparency consider using rgba.

answered Jun 24, 2012 at 7:41

monkeymad2

1531 silver badge11 bronze badges

Collectives™ on Stack Overflow

Image background and text for input submit button - CSS

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related