# inputEx - Styling Buttons

## Styling the buttons

Let's add a different background on buttons

/******************************* * JS *******************************/ var form = new 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'" (<input 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