Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only a and button elements for the best rendering.
| Button | class="" | Description |
|---|---|---|
btn-u |
Default Unify Template button style | |
btn-u btn-u-blue |
New blue button style | |
btn-u btn-u-red |
New red button style | |
btn-u btn-u-orange |
New orange button style | |
btn-u btn-u-sea |
New turquoise button style | |
btn-u btn-u-green |
New green button style | |
btn-u btn-u-yellow |
New yellow button style | |
btn |
Standard gray button with gradient | |
btn btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-info |
Used as an alternative to the default styles | |
btn btn-success |
Indicates a successful or positive action | |
btn btn-warning |
Indicates caution should be taken with this action | |
btn btn-danger |
Indicates a dangerous or potentially negative action | |
btn btn-inverse |
Alternate dark gray button, not tied to a semantic action or use | |
btn btn-link |
Deemphasize a button by making it look like a link while maintaining button behavior |
Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
Add the .disabled class to a buttons.
Add the disabled attribute to button buttons.
Use the .btn class on an a, button, or input element.
As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.
Unify is an incredibly beautiful responsive Bootstrap Template for corporate and creative professionals.
Subscribe to our newsletter and stay up to date with the latest news and deals!
