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' />

Solution 1

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

Solution 2

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

Solution 3

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