Let's add a different background on buttons
var descriptedFields = [
{ type: 'select', label: 'A select', choices: ['One','Two','Three'], value:"One" },
{ type: 'string', label: 'StringField', value:'Jacques', required:true },
{ type: 'boolean', label: 'Happy to be there ?', name: 'happy'},
{ type: 'radio', label: 'Radio', name: 'example1', choices: ['Ajaxian','YUI blog','other']}
];
var form = new Y.inputEx.Form({
id:'sampleForm',
parentEl: 'container1',
fields: descriptedFields,
legend: 'User Informations',
buttons:[
/*
*
* Note that we use "type:'submit-link'" or "type:'link'" buttons here because they
* are rendered with a different DOM that is easier to style in a cross-browser way
* than "type:'submit'" ().
*
*/
{type: 'submit-link', value: 'Submit Form'}, /* classic form submit triggered, as with type:'submit' */
{type: 'link', value: 'Cancel', onClick:function(e) {form.clear();} } /* reset inputEx form */
]
});
// CSS :
//
// a.inputEx-Button {
// /* Sliding right image */
// background: transparent url('assets/images/button_right.png') no-repeat scroll top right;
// display: block;
// float: left;
// height: 34px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
// margin-right: 6px;
// padding-right: 20px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
// text-decoration: none;
// color: #000000;
// font-family: Arial, Helvetica, sans-serif;
// font-size:12px;
// font-weight:bold;
// cursor:pointer;
// }
// a.inputEx-Button span {
// /* Background left image */
// background: transparent url('assets/images/button_left.png') no-repeat;
// display: block;
// line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTON HEIGHT */
// padding: 7px 0 5px 18px;
// cursor:pointer;
// }
// a.inputEx-Button:hover span{
// text-decoration:underline;
// }
CSS Credits : http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx