Jump to content

lferezy4

Members
  • Posts

    62
  • Joined

  • Last visited

Reputation Activity

  1. Like
    lferezy4 reacted to Rikki for a guide, Buttons   
    Basics
    The button classes described here can be applied to any element, although typically would be applied to an element like a, input[type="submit"] or button so that the user can interact with it.
    As a minimum, a button should receive the basic ipsButton class, plus a size class and a style class (explained below).
     
    Button styles
    ipsButton_normal
    Normal button ipsButton_primary
    Primary button ipsButton_alternate
    Alternate button ipsButton_important
    Important button ipsButton_light
    Light button ipsButton_veryLight
    Very light button ipsButton_overlaid
    Overlaid button ipsButton_link
    Link button  
    Button sizes
    ipsButton_medium
    Medium button ipsButton_verySmall
    Very small button ipsButton_small
    Small button ipsButton_large
    Large button ipsButton_veryLarge
    Very large button ipsButton_fullWidth
    Can be combined with another size, above.
    Full width button  
    Disabled buttons
    Buttons can be visually disabled either by adding the class ipsButton_disabled, or, on relevant input elements, adding the disabled property. For example:
    <a href='#' class='ipsButton ipsButton_normal ipsButton_medium ipsButton_disabled'>Disabled button (link)</a> <input type='submit' class='ipsButton ipsButton_normal ipsButton_medium' disabled value='Disabled button (input)'> These would render like so:
    Disabled button (link)  
    Split buttons
    Split buttons allow you to create toolbars easily by specifying a list of buttons that display joined to each other.
    They are created by specifying the class ipsButton_split on a wrapper element containing two or more buttons. The wrapper element can be a <ul> tag, or any other that makes sense for your use.
    All of the buttons in a split button group should be the same size, otherwise results are unpredictable. Different styles can be used on each button, though.
    <ul class='ipsButton_split'> <li><a href='#' class='ipsButton ipsButton_small ipsButton_primary'>Button 1</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Button 2</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Button 3</a></li> </ul> Button 1 Button 2 Button 3  
×
×
  • Create New...