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 Redband 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.
2013 © Redband. ALL Rights Reserved. Privacy Policy | Terms of Service