Skip to main content link. Accesskey S

Buttons

These are the buttons found in our UI:

The standard and special styles can be applied to input or button tags, and we also have a custom link version of the button that can be used to give more control over the style and padding of the button.

The image button is created using a span that wraps an input type=image element, or a link that wraps an img tag.

Directionality:

Form buttons

These are input and button tags styled using the lotusBtn class or lotusFormButton class.

Classes

  • lotusBtn - the basic button class
  • lotusBtnAction - DEPRECATED additional class for action buttons
  • lotusBtnSpecial - additional class for special buttons
  • lotusBtnDisabled - additional class for disabled buttons
  • lotusBtnImg - this class goes on the wrapper for an image button. (In this case the lotusBtn class is not needed.)
  • lotusBtnContainer - the class for a div surrounding a row of buttons
  • lotusBtnDivider - this class is an additional class for a button container when you need a bottom divider for the buttons
  • lotusButton - the class for a fixed-width button in the left or right column
  • lotusFormButton - the class for buttons that appear in forms

Basic Implementation

Non-form buttons are created using links wrapped in a span tag. The span has a display of inline-block so it is only as long as the button text (plus padding). The link has a display of block, to make it fill the area of the span so that the whole button is clickable.

Form buttons are styled input buttons, which leaves a little to be desired as far as the look in IE (IE puts a transparent 1 pixel border inside the outer border which shows the background color of the button).

Variations

Buttons at the top of a table are contained in a div with a lotusBrnContainer class. If view controls appear beside them, the div also needs a lotusActionBar class.

The basic class that goes on all buttons (with the exception of image-only buttons) is the lotusBtn class, which sets up defaults and creates a gray button. The lotusBtnSpecial class is an additional class supplied to create the blue buttons. The lotusBtnDisabled class is an additional class supplied to create a disabled button.

An image button is made out of a DOM node that contains the background gradient and an image that is set to blank.gif and assigned a background graphic that is the icon itself. The Add button on this page shows an example of a link wrapping an image. The search button is an example of a span wrapping an input image form button (input type=image).

The lotusButton class is to support a button in the left column. We are moving away from that positioning but the class is still available.

Examples

Sample HTML

Sample HTML - Form Buttons

CSS (buttons.css)

Theme CSS (buttonsTheme.css)

The reason we use spans and links to create the button is to support both our complicated look and feel (inside and outside borders) and to allow us to include images (like the drop-down arrow) in the buttons.

The reason we use tables is to only have the button be as long as the text, and be able to support padding values. I have done some exploration of changing this to inline-block and -moz-inline-block but ran into some early issues, so it remains as display:table for now. [update: this has been changed to inline-block]

The button tag allows you to surround both text and an image, but it has built-in padding in IE, which grows larger the more text that is in the button. For this reason we stayed away from using button tags. (We have added styles to give you the option to use button tags, even though it is not the preferable method.)

We have an optional style for input buttons, because they are easier for developers to use on forms, rather than having to write special code. They do have some issues in IE, where the background color shows through for one pixel inside the border color. This is more noticeable on some colored buttons than others. We need to make sure the background color is able to show the foreground text color, when images are turned off. Sometimes that makes it a less-than-desireable inner border color for the IE buttons.

Currently, our form button styles are the same as our special button styles, but they use a different class in case we want to change that at some point.

April 2009 - updated the green action buttons to our regular silver button style and made the text on silver buttons be black. Updated the disabled button to use our same silver background with gray text.

May 2009 - added the ability to theme our image buttons (search, close, add).

See also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.