Button text color in Extjs 4 - css

Question

I'm using Exjts 4 and i want to change the button text color. Here is my code:
{
xtype: 'button',
text: 'My Button',
style:{
color: 'red'
}
}

Answer 1

In case someone needs it. I do not know if it's a dirty solution but it works
{
xtype: 'button',
text: '<div style="color: red">My Button</div>',
}

Answer 2

Davor Zubak shed light on a solution although it failed in my complex application. I achieved what I want by this:
Button's cls: 'myButton'
In my css file, define:
.myButton .x-btn-inner {
color: red;
font-family: Georgia;
font-size: large;
font-weight: bold;
}
This way it only overrides the ExtJS theme for the particular buttons who have 'myButton' cls.

Answer 3

There is some strange behavior in Extjs 4.2.0, but there is an override possible. Give your button a class using cls:'yourClassName' property and then in CSS make a full path to span holding the text, like so: .yourClassName div a span. Also give your css property a !important value to successfuly override base class.
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
},
cls: 'foo'
});
and in css simply:
.foo div a span
{
color:#ff0000 !important;
}
Here is a example.