Демонстрация
Framework Buttons
Framework buttons
| Class name | Info | Example |
|---|---|---|
| btn | The main class that has to be on every button. Any other class will be applied next to this one | Button |
| btn btn-base | Standard button with the main template background | Button |
| btn btn-alt | Standard button with the second main template background | Button |
| btn btn-light | Standard button with a light background | Button |
| btn btn-dark | Standard button with a dark template background | Button |
| btn btn-lg btn-base | Makes the button large | Button |
| btn btn-sm btn-alt | Makes the button smaller | Button |
| btn btn-xs btn-dark | Makes the button extra small | Button |
| btn btn-block btn-base | Make the button full width | Button |
Left aligned icon buttons
| Class name | Info | Example |
|---|---|---|
| btn btn-icon btn-base fa-paw | Icon button with the main template background | Button |
| btn btn-icon btn-alt fa-paw | Icon button with the second main background | Button |
| btn btn-icon btn-light fa-paw | Icon button with a light background | Button |
| btn btn-icon btn-dark fa-paw | Icon button with a dark background | Button |
| btn btn-lg btn-icon btn-base fa-paw | Large icon button with the main color background | Button |
| btn btn-sm btn-icon btn-alt fa-paw | Small icon button with the second main color background | Button |
| btn btn-xs btn-icon btn-dark fa-paw | Extra small icon button with a dark background | Button |
| btn btn-block btn-icon btn-base fa-paw | Makes the button full width | Button |
Right aligned icon buttons
To use the right aligned icon buttons use .btn-icon-right next to btn-icon. More detail in the buttons table
| Class name | Info | Example |
|---|---|---|
| btn btn-icon btn-icon-right btn-base fa-paw | Icon button with the main template background | Button |
| btn btn-icon btn-icon-right btn-alt fa-paw | Icon button with the second main background | Button |
| btn btn-icon btn-icon-right btn-light fa-paw | Icon button with a light background | Button |
| btn btn-icon btn-icon-right btn-dark fa-paw | Icon button with a dark background | Button |
| btn btn-lg btn-icon btn-icon-right btn-base fa-paw | Large icon button with the main color background | Button |
| btn btn-sm btn-icon btn-icon-right btn-alt fa-paw | Small icon button with the second main color background | Button |
| btn btn-xs btn-icon btn-icon-right btn-dark fa-paw | Extra small icon button with a dark background | Button |
| btn btn-block btn-icon btn-icon-right btn-base fa-paw | Makes the button full width | Button |
Bordered buttons
| Class name | Info | Example |
|---|---|---|
| btn btn-b-white | Bordered button with white color | Button |
| btn btn-b-base | Bordered button with the main template color | Button |
| btn btn-b-alt | Bordered button with the second main template color | Button |
| btn btn-b-dark | Bordered button with a dark color | Button |
| btn btn-b-light | Bordered button with a light color | Button |
| btn btn-lg btn-b-base | Large bordered button with the main template color | Button |
| btn btn-sm btn-b-alt | Small bordered button with second main template color | Button |
| btn btn-xs btn-b-dark | Extra small bordered button with a dark color | Button |
| btn btn-block btn-b-base | Make the button full width | Button |