This document describes the basic button classes defined in the global skin module button.css. You can use the class attribute on a button to specify one or another of these button styles in your interface. Note that the background color in these screenshots does not reflect any style definition in the buttons themselves, but is a style on the parent box.
|
| Button Class | Inactive | Hover | Notes |
<button value="regular" />
|
 |
 |
The regular button includes a lightgrey/grey border 1 pixel wide and a thin margin. When you hover over or click the button, the entire border turns black. |
<button class="borderless" value="borderless" />
|
 |
 |
The borderless button is very much like the default, but the border is lightgrey all the way around. Active behavior is the same.
|
<button class="dialog" value="dialog"/>
|
 |
 |
The dialog button includes 10px padding on either side of the text and 2px padding above and below.
|
<button class="large-toolbar" value="large-toolbar" />
|
 |
 |
The large-toolbar class uses a GIF, coloring, and size minimums to define a round button like those displayed in the navigation toolbar. Note that the large-toolbar class does not show the button text and does specify a navigation icon, which is defined in the button's ID style definition (e.g. button#Back).
|
<button class="key-toolbar" value="key-toolbar"/>
|
 |
 |
The key-toolbar class is a small version of the lg-toolbar that includes the button text (for some reason). Like the lg-toolbar, the active state includes an additional pixel of white around the inside of the button border.
|
<button class="toolbar" value="toolbar"/>
|
 |
 |
The toolbar class is the same size as the key-toolbar (min-height & min-width: 36px), but it is transparent until it is active. The text is visible and lightblue, the one pixel border is dark blue when active.
|