Error Stock: CSS3 Buttons

Buttons

The "buttons" can be created by adding class="button" to any appropriate <a>, <button>, or <input> 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.

<a href="#" class="button">Post comment</a>

<a href="#" class="button pill">This is a pill button</a>

This is a pill button

<a href="#" class="button primary">Publish post</a> 
<a href="#" class="button">Save as draft</a>

Publish post Save as draft

Buttons with dangerous actions

If you have a button that triggers a dangerous action, like deleting data, this can be indicated by adding the class danger.

<a href="#" class="button danger">Delete post</a>

Delete post

Big buttons

If you wish to emphasize a specific action you can add the class big.

<a href="#" class="button big">Create Project</a>

Create Project

Grouped buttons

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.

<div class="button-group">
    <a href="#" class="button primary">Dashboard</a>
    <a href="#" class="button">Inbox</a>
    <a href="#" class="button">Account</a>
    <a href="#" class="button">Logout</a>

</div>

Dashboard
Inbox
Account
Logout

<ul class="button-group">
    <li><a href="#" class="button primary pill">Dashboard</a></li>
    <li><a href="#" class="button pill">Inbox</a></li>
    <li><a href="#" class="button pill">Account</a></li>
    <li><a href="#" class="button pill">Logout</a></li>

</ul>

<div class="button-group minor-group">…</div>

Dashboard
Inbox

Account
Logout

Mixed groups

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.

<div class="actions button-container">
    <a href="#" class="button primary">Compose new</a>
    
    <div class="button-group">
        <a href="#" class="button primary">Archive</a>
        <a href="#" class="button">Report spam</a>
        <a href="#" class="button danger">Delete</a>
    </div>
                        
    <div class="button-group minor-group">
        <a href="#" class="button">Move to</a>
        <a href="#" class="button">Labels</a>
    </div>

</div>

Compose new

Archive
Report spam
Delete

Move to
Labels

Buttons with icons

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:

<a href="#" class="button icon search">Search</a>

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

Browser compatibility

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.

License

Public domain: http://unlicense.org/

Acknowledgements

Inspired by Michael Henriksen's CSS3 Buttons. Icons from Iconic pack.