Sencha Touch：绿色前进按钮答案

【问题标题】：Sencha Touch: green forward buttonSencha Touch：绿色前进按钮
【发布时间】：2013-07-31 22:18:38
【问题描述】：

好的，这里有一个煎茶链接http://try.sencha.com/touch/2.2.0/demos/Ext.Button.ui/viewer.html，用于不同类型的按钮。所以，从那里让按钮向前，我做

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

美好而完美。这很容易。

有谁知道如何使这个按钮变成绿色（不仅仅是按钮，还有箭头）？

【问题讨论】：

标签： css button user-interface sencha-touch-2 background-color

【解决方案1】：

简单：

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

【讨论】：

【解决方案2】：

解决方案是用以下代码覆盖 css 类：

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

XXXXXXXXXXXXXXXXXXXXXXXXX 字符串是由在线服务（google 用于生成数据：image/png;base64 或类似的东西）从我的myarrow.png 图像生成的。

【讨论】：

【解决方案3】：

实际上，对于箭头，他们使用了 webkit 掩码，因此无论您通过使用 css 背景颜色为该箭头提供的背景颜色如何，都需要它。因此，要使该按钮变为绿色，请使用以下代码：-

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

【讨论】：