Basic CSS for different button style, button size, button status, and button elements.
.btn class. Based on Bootstrap, there 2 main styles of elcom Platform.
| Button | Class | Description | Apply For |
|---|---|---|---|
btn |
Standard gray button with gradient. | By default, most buttons, such as Add New, Edit, Delete, Cancel have this style. | |
btn btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons. | Primary action button, such as Save, OK, Accept. They are normally placed at the first position in a row of buttons. |
.btn-large, .btn-small, or .btn-mini for additional sizes.
| Button | class="" | Description | Apply For |
|---|---|---|---|
btn btn-large |
Font size: 14px Button-height: 30px |
Primary or main actions which are expected to do. | |
btn |
Font size: 13px Button-height: 28px |
Default button for all actions in a page or popup. | |
btn btn-small |
Font size: 12px Button-height: 26px |
Button for sub-function in a page or popup. | |
btn btn-mini |
Font size: 11px Button-height: 20px |
Hover-reveal actions, repeated actions in a table. |
Depending on special goals, the block level button can be used to draw attention to do some specific actions. To display it, simply add .btn-block.
Add the .disabled class to the <a> button.
Add the disabled attribute to the <button> button.
Based on Bootstrap, there are some button samples that are customized by elcom Platform Team:
