The "buttons" can be created by adding class="button"
to any appropriate ,
, or
element. Add a further class of
pill
to create a button pill-like button. Add a further class of primary
to emphasise more important actions.
If you have a button that triggers a dangerous action, like deleting data, this can be indicated by adding the class danger
.
If you wish to emphasize a specific action you can add the class big
.
Groups of buttons can be created by wrapping them in an element given a class of button-group
. A less important group of buttons can be marked out by adding a further class, minor-group
.
Displaying a mixture of grouped and standalone buttons, as might be seen in a toolbar, can be done by adding another wrapping element with the class button-container
.
A range of icons can be added (only for links and buttons) by adding a class of icon
and any one of the provided icon classes:
Class | Example |
---|---|
.arrowup |
Move up |
.arrowdown |
Move down |
.arrowleft |
Move left |
.arrowright |
Move right |
.approve |
Approve registration |
.add |
Add post |
.remove |
Remove item |
.log |
View log |
.calendar |
Add to calendar |
.chat |
Start chat |
.clock |
Start timer |
.settings |
Settings |
.comment |
Add comment |
.fork |
Fork |
.like |
Like |
.favorite |
Favorite |
.home |
Back to homepage |
.key |
Password protect |
.lock |
Lock |
.unlock |
Unlock |
.loop |
Resend message |
.search |
Search |
.mail |
Send email |
.move |
Move |
.edit |
Edit post |
.pin |
Pin to Map |
.reload |
Reload page |
.rss |
Subscribe to RSS feed |
.tag |
Add tag |
.trash |
Delete post |
.user |
Add new user |
Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.
Note: Some CSS3 features are not supported in older versions of Opera and versions of Internet Explorer prior to IE 8. The use of icons is not supported in IE 6 or IE 7.
Public domain: http://unlicense.org/
Inspired by Michael Henriksen's CSS3 Buttons. Icons from Iconic pack.