Myself I find the look and feel of the toolbar buttons in Exts default theme a bit lacking. From a users' point of view I don't feel it's immediately obvious for a user that the button can be clicked upon, especially when the button is just text and no icon.
I found a suggestion by Animal here but that still didn't satisfy me. So for everyone (anyone) who feels the same way I propose a different solution, make the buttons look like the way buttons look in Ext outside of a toolbar. So instead of:
old.jpg
They could look like:
new.jpg
In order to do this use the following CSS to make all toolbar buttons this way:
PHP Code:
/* This gives toolbar buttons the regular button style */
.x-toolbar .x-btn-left { background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px 0px;}
.x-toolbar .x-btn-center { background: url(resources/images/default/button/btn-sprite.gif) repeat-x 0px -42px; text-align: center;}
.x-toolbar .x-btn-right { background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -21px;}
.x-toolbar .x-btn-over .x-btn-left{ background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -63px;}
.x-toolbar .x-btn-over .x-btn-center{ background: url(resources/images/default/button/btn-sprite.gif) repeat-x 0px -105px;}
.x-toolbar .x-btn-over .x-btn-right{ background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -84px;}
.x-toolbar .x-btn-click .x-btn-center, .x-btn-menu-active .x-btn-center{ background-position:0 -126px; }
/* end block */
OR, if you only want to apply the style on a few buttons, use 'cls: x-form-toolbar-standardButton' and use the following CSS
PHP Code:
/* This gives toolbar buttons with cls: x-form-toolbar-standardButton the regular button style */
.x-toolbar .x-form-toolbar-standardButton .x-btn-left { background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px 0px;}
.x-toolbar .x-form-toolbar-standardButton .x-btn-center { background: url(resources/images/default/button/btn-sprite.gif) repeat-x 0px -42px; text-align: center;}
.x-toolbar .x-form-toolbar-standardButton .x-btn-right { background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -21px;}
.x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-left{ background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -63px;}
.x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-center{ background: url(resources/images/default/button/btn-sprite.gif) repeat-x 0px -105px;}
.x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-right{ background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -84px;}
.x-toolbar .x-form-toolbar-standardButton.x-btn-click .x-btn-center, .x-btn-menu-active .x-btn-center{ background-position:0 -126px; }
/* end block */
Maybe it can help someone
.