Sencha Touch: green forward button

Question

Ok, here is a sencha link http://try.sencha.com/touch/2.2.0/demos/Ext.Button.ui/viewer.html for different types of buttons. So, from there to make the button forward, I do

{
xtype: 'button',
ui: 'forward',//I'm adding this string to make it with a right arrow
text: 'forward'
}

Nice and perfect. That was easy.

Does anyone know how to make this button green (not just the button, but the arrow as well )?

Answer 1

Actually for the arrow they have used webkit mask so whatever background color you give to that arrow by using css background color it takes that. So, to make that button green use following code:-

.x-button-forward, .x-button-forward:after { background: -webkit-linear-gradient(top, #a2e306,#7eb105 3%,#5b7f03); }

Answer 2

simple:

{
  xtype: 'button',
  ui: ['confirm', 'forward'],
  text: 'forward'
}

Answer 3

The solution was to overwrite css classes with:

.x-webkit .x-button-forward:before, .x-webkit .x-button-forward:after, 
.x-webkit .x-toolbar .x-button-forward:before, .x-webkit .x-toolbar .x-button-forward:after 
{
 width: 15px;
 height: 32px;
 background-repeat: no-repeat;
 background-image: url(data:image/png;base64,XXXXXXXXXXXXXXXXXXXXXXXXX);
}

where XXXXXXXXXXXXXXXXXXXXXXXXX string was generated by online service (google for generate data:image/png;base64 or something like that) from my myarrow.png image.