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.

I have also tried adding addStyles/cls: tags to the button object but that hasn't worked either.

Does anyone know why this might be?

Button 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);  

CSS Class:

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

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.

I have also tried adding addStyles/cls: tags to the button object but that hasn't worked either.

Does anyone know why this might be?

Button 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);  

CSS Class:

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

• javascript
• css
• extjs

• 2 questions, 1 what extjs version are you using, and second the css class you written is the css the button curently has? or what you try to apply ? – nscrob Commented Aug 30, 2011 at 8:33
• You added the class "test" why not select it with that? – Kyle Commented Aug 30, 2011 at 8:36
• I'm using version 3.4. If you look, the class "test" is mented out because that didn't work with a previous css class. What do you mean by is the css class the css the button has? I tried adding the class to the button but saw this css in a blog that said it would apply to all buttons. Similar to x-grid3 for grid css – pm13 Commented Aug 30, 2011 at 9:07
• i made a small modification to your css just so it will be transparent, but if you want more modifications i suggest you use some developer tools and check what css classes the buttons have and after that rewrite them. – nscrob Commented Aug 30, 2011 at 9:22

1 Answer 1

Buttons's backgound is set by using background-image in tds. This should work (here is demo):
JS:

var button = new Ext.Button({
    text: month,    
    cls: "test",
    // ...
});

CSS:

.test td {
    background-position: 1000px 1000px;
}