Fork me on GitHub

inputEx

Jump to Table of Contents

inputEx - Button styling demo

Example of button styling

Let's add a different background on form buttons

CSS

a.inputEx-Button {
   /* Sliding right image */
   background: transparent url('assets/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/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;
}

Javascript

var fields = [ 
    { type: 'select', label: 'A select', choices: ['One','Two','Three'], value: "One" },
    { type: 'string', label: 'Firstname', value: 'Sandrine', 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: fields, 
    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 Credits : http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx