inputEx - Styling Buttons

Styling the buttons

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