Jump to content
Announcing Achievements! ×

Community

lferezy4

Members
  • Posts

    62
  • Joined

  • Last visited

0 Badges Earned

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...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy