title: Changing HTML button tag background color with css?
body: <p>I am using the HTML button tag  for my submit buttons as well as buttons that direct to other pages and features I would like to be able to  have buttons with different backgrounds (one blue, one grey, one red, one green, etc) but can't seem to get it working by simply adding a class tot he button tag.</p>
  
  <p>Here is what I have so far
  <strong>HTML</strong></p>
  
  <pre><code>&lt;button class="green_btn" type="submit" name="cnp"&gt;News Control&lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>button {
      margin: 0 auto 5px auto;
      display: block;
      width: 134px;
      height: 35px;
      background: url('../images/darkgrey_btn_bg.png') no-repeat left;
      border: 0 none;
      font-weight: bold;
      text-align: center;
      color: #fff;
      cursor: pointer;
  }
  .grey_btn button {
      background: url('../images/darkgrey_btn_bg.png') no-repeat left;
  }
  .green_btn button  {
      background: url('../images/green_btn_bg.png') no-repeat left;
  }
  .ltblue_btn button {
      background: url('../images/ltblue_btn_bg.png') no-repeat left;
  }
  .blue_btn button {
      background: url('../images/blue_btn_bg.png') no-repeat left;
  }
  .red_btn button {
      background: url('../images/red_btn_bg.png') no-repeat left;
  }
  </code></pre>
  
  <p>by default I want the button to be the garkgrey_btn_bg.png as the background, but if I want to use the green_btn_bg.png for the background, adding class="green_btn" to the html does nothing.</p>
  
  <p>Anyone have any ideas?</p>