customizing buttons

[DaveC426913]

The button styles supplied are basic. The config option ui says:
Valid options are 'normal', 'back', 'round', 'action', 'forward'. Defaults to 'normal'.


For starters, I want my buttons to be much larger, with text around 30pt.


xtype: 'container',
defaults: {
ui: 'action',
minWidth: 68,
maxWidth: 68,
minHeight: 68,
maxHeight: 68,
scope: this,
handler: this.tapHandler,
cls: 'butt',
},
layout: {type: 'hbox'},
items: [
{ xtype: 'button', text: 'Q'},
{ xtype: 'button', text: 'W'},
{ xtype: 'button', text: 'E'},
etc.


and then in my CSS:


.butt{
font-size: 1.6em;
margin: 4px;
}



But this gives all my buttons square corners, thus:

21469

How do I prevent this?
More generally, what is the correct way to customize my buttons?

[davidkaneda]

Hi there, just change your rule to '.butt span' — this is why we added spans to all of the buttons.

Thanks,
Dave

[davidkaneda]

Oh, also: keep the margin on just '.butt'-

[DaveC426913]

Those square corners were being produced by the Webkit box shadow.

I got rid of them thusly:



.x-button{
-webkit-box-shadow: none;
...
}