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