Using the Supina Framework you can create all kind of button elements.
To create this element, with default color styling, you need to add the .btnand .label-defaultCSS class to any <a>, <input>or <button>element.
You can disable a button element by adding either the .disabledCSS helper class or the disabledparameter.
To make a button element active you need to add the .activeCSS helper class.
To change the button elements sizes you need to add one of the following CSS helper classes .label-xs, .label-sm, .label-lg.
You can use the color helper CSS classes to add different background to the button element.
The .label-defaultand .label-primarycolors can be inherited from a theme color scheme you select. These colors are usually used through out the app to style different kinds of widgets, components and elements.
| Result | Helper class | Description |
|---|---|---|
.label-primary | This is the primarybackground color. | |
.label-default | This is the defaultbackground color. |
The color helper classes below come packed with the Supina Framework.
| Result | Helper class | Description |
|---|---|---|
.label-success | Used for successactions. | |
.label-danger | Used for erroractions. | |
.label-warning | Used for warningactions. | |
.label-info | Used for informationactions. |
These helper classes also come packed with the Supina Framework.
| Result | Helper class | Description |
|---|---|---|
.label-blue-alt | Alternate blue background. | |
.label-yellow | Yellow background. | |
.label-purple | Purple background. | |
.label-azure | Azure background. | |
| Black | .label-black | Black background. |
| black | .label-black | black background. |
| black alternate | .label-black-alt | black alternate background. |
To create a button element that looks like a link you need to add the .label-linkCSS helper class. To change its color add one of the following font color CSS helper classes.
| Result | Helper class | Description |
|---|---|---|
| Default | .label-link | Used for buttons that look like regular links, without a background color or border. |
| Blue | .font-blue | Creates a blue link button. |
| Alternate blue | .font-blue-alt | Creates an alternate blue link button. |
| Red | .font-red | Creates a red link button. |
| Orange | .font-orange | Creates a orange link button. |
| Green | .font-green | Creates a green link button. |
| black | .font-black | Creates a black link button. |
| Alternate black | .font-black-alt | Creates an alternate black link button. |
| Purple | .font-purple | Creates a purple link button. |
| Azure | .font-azure | Creates a azure link button. |
| Black | .font-black | Creates a black link button. |
| White | .font-white | Creates a white link button. |
To change the button elements to full width (block level) you have to add the .label-blockCSS helper class.
To create button groups you need to wrap buttons inside a <div>with .label-groupCSS helper class.
To change the button groups sizes you need to add one of the following CSS helper classes to the .label-group, .label-group-xs, .label-group-sm, .label-group-lg.
Button toolbars consist of multiple .label-groupelements wrapped inside a <div>with .label-toolbarCSS helper class.
By placing a .label-groupwithin another .label-groupyou can create dropdown menus mixed with a series of buttons.
To create vertically nestes button groups you need to wrap the .label-groupelements within a wrapper with .label-group-verticalCSS helper class.
To make a group of buttons stretch at equal sizes to span the entire width of its parent, you need to add .label-group-justifiedto the .label-groupelement. Also works with button dropdowns within the button group.
Use any button to trigger a dropdown menu by placing it within a .label-groupand providing the proper menu markup.
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
To change the button dropdowns sizes you need to add one of the following CSS helper classes .label-xs, .label-sm, .label-lg.
Button dropups are just like regular dropdowns, only they open at the top rather than the bottom. To create a button dropup you need to add the .dropupCSS helper class to the button parent container.
To create single toggle buttons you need to add the data-toggle="button"parameter to a button element.
To create radio toggle buttons groups you need to add the data-toggle="buttons"to a .label-groupthat wraps the button elements.
To create radio toggle buttons groups you need to add the data-toggle="buttons"to a .label-groupthat wraps the button elements.
Loading buttons display a custom message when clicked to indicate a background action. You can set the 'loading' message using the data-loading-text="Custom loading text here..."button parameter.
We created special styles for Twitter, Facebook, Google+ social media buttons.
Dashboard buttons are vertical buttons wrapped in a div with the .dashboard-buttonsCSS class.To create vertical button you need to add the .vertical-buttonCSS helper class to any .btnelement.
Just like regular dashboard buttons, but with different color styling.
To create a pagination element you need to add the .paginationCSS helper class to an <ul>list.
You can use the .disabledCSS helper class for unclickable links and .activefor current pages.
To change the pagination element size you need to use .pagination-smor .pagination-lg.
You can use the pager to create simple next/previous navigation menus.
You can align each link to the sides.
By adding .disabledto a pagination item you can make it look unclickable, disabled.
On the other hand, we denounce...
Dislike men who are so beguiled...
Of pleasure of the moment, so...
That they cannot foresee the...
Pain and trouble that are bound...
Equal blame belongs to those...
Weakness of will, which is same...
These cases are perfectly simple...
