Input [type = "button"], input [type = "submit"], the CSS button is not working properly

Question

I'm trying to get this to work, but still something is wrong.

I want to style the submit buttons with css to fit the ones I already have.

<input type="submit" name="save_settings" value="Opslaan">

Style:

 input[type="button"], input[type="submit"], button { background: url("http://gasterijdebakker.nl/email/php/pages/images/layout/bg-btn-left.png") no-repeat scroll left top transparent; display: inline-block; line-height: 35px; padding:7px 0 15px 12px; margin:0; border:0; color: #FFFFFF; font-size: 15px; font-weight: bold; letter-spacing: -1px; text-shadow: 0 1px 1px #70A7E0; 

}

jsFiddle

Answer 1

You better not use a background image and use the css3 gradient instead. Sort of:

 input[type="button"], input[type="submit"], button { background-color: #a3d4ff; background-image: -webkit-gradient(linear, left top, left bottom, from(#a3d4ff), to(#88bcf2)); background-image: -webkit-linear-gradient(top, #a3d4ff, #88bcf2); background-image: -moz-linear-gradient(top, #a3d4ff, #88bcf2); background-image: -o-linear-gradient(top, #a3d4ff, #88bcf2); background-image: linear-gradient(to bottom, #a3d4ff, #88bcf2); border-radius:3px; display: inline-block; line-height: 22px; padding:7px 12px; margin:0; border: 1px solid #88bcf2; color: #FFFFFF; font-size: 15px; font-weight: bold; letter-spacing: -1px; text-shadow: 0 1px 1px #70A7E0; cursor:pointer; }​ 

Answer 2

Items

input cannot be completely styled.

Use the button element instead.

Button Elements

It is much easier to style than input elements. You can add internal HTML content (think em, strong, or even img) and use the following: after and: before the pseudo-element to achieve complex rendering, while input only accepts a text value attribute.

A source:

Mozilla Developer Network

https://developer.mozilla.org/en-US/docs/HTML/Element/button