Let's add a different background on buttons
| 1 | /******************************* |
| 2 | * JS |
| 3 | *******************************/ |
| 4 | var form = new inputEx.Form({ |
| 5 | id:'sampleForm', |
| 6 | parentEl: 'container1', |
| 7 | fields: descriptedFields, |
| 8 | legend: 'User Informations', |
| 9 | buttons:[ |
| 10 | /* |
| 11 | * |
| 12 | * Note that we use "type:'submit-link'" or "type:'link'" buttons here because they |
| 13 | * are rendered with a different DOM that is easier to style in a cross-browser way |
| 14 | * than "type:'submit'" (<input type="submit" />). |
| 15 | * |
| 16 | */ |
| 17 | {type: 'submit-link', value: 'Submit Form'}, /* classic form submit triggered, as with type:'submit' */ |
| 18 | {type: 'link', value: 'Cancel', onClick:function(e) {form.clear();} /* reset inputEx form */ |
| 19 | ] |
| 20 | }); |
| 21 | |
| 22 | /******************************* |
| 23 | * CSS |
| 24 | *******************************/ |
| 25 | a.inputEx-Button { |
| 26 | /* Sliding right image */ |
| 27 | background: transparent url('assets/images/button_right.png') no-repeat scroll top right; |
| 28 | display: block; |
| 29 | float: left; |
| 30 | height: 34px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */ |
| 31 | margin-right: 6px; |
| 32 | padding-right: 20px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */ |
| 33 | text-decoration: none; |
| 34 | color: #000000; |
| 35 | font-family: Arial, Helvetica, sans-serif; |
| 36 | font-size:12px; |
| 37 | font-weight:bold; |
| 38 | cursor:pointer; |
| 39 | } |
| 40 | a.inputEx-Button span { |
| 41 | /* Background left image */ |
| 42 | background: transparent url('assets/images/button_left.png') no-repeat; |
| 43 | display: block; |
| 44 | line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTON HEIGHT */ |
| 45 | padding: 7px 0 5px 18px; |
| 46 | cursor:pointer; |
| 47 | } |
| 48 | a.inputEx-Button:hover span{ |
| 49 | text-decoration:underline; |
| 50 | } |
| view plain | print | ? |
CSS Credits : http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx