input[type="button"], input[type="submit"], button CSS not behaving properly

css

Solution

You would be better off not using the background image and using css3 gradient instead. Something like:

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

Problem

I'm trying to get this to work but there's still something not right. I want to style the submit buttons with css to match 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

Original source