title: CSS Styles not applying to ExtJS Button
body: <p>I have added css styles to my buttons which are nested within a panel. However, the buttons are not appearing as transparent even if I put the !important tag in the css. </p>
  
  <p>I have also tried adding addStyles/cls: tags to the button object but that hasn't worked either.</p>
  
  <p>Does anyone know why this might be?</p>
  
  <p>Button Code:</p>
  
  <pre><code>var button = new Ext.Button({
                  text: month,    
                  //cls: "test",
                  handler: function(button){
                      var buttonMonth = button.text;
                      getGrids(buttonMonth);
                  }
              });
              //button.addClass("test");
              panel.add(button);  
  </code></pre>
  
  <p>CSS Class:</p>
  
  <pre class="lang-css prettyprint-override"><code>.x-btn{
      font:normal 11px tahoma, verdana, helvetica;
      cursor:pointer;
      white-space: nowrap;
  }
  
  .x-btn button {
      border:0 none;
      background:transparent !important;
      font:normal 11px tahoma,verdana,helvetica;
      padding-left:3px;
      padding-right:3px;
      cursor:pointer;
      margin:0;
      overflow:visible;
      width:auto;
      -moz-outline:0 none;
   }
  </code></pre>