Milk is a lightweight but powerful CSS3 UI framework. It supports skins and plugins.
Framework demo: Milk CSS3 Framework
- Copy
css/milk
into your stylesheets folder and link tomilk/packages/standart.css
in the head of your HTML document. - Copy
images/milk
into your images folder. - Add
button
class to the<button>
,<input>
or<a>
HTML element to create nice 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 pill-like button. Add a further class of primary
to emphasise
more important actions.
<a href="#" class="button">Post comment (link)</a>
<input class="button" type="submit" value="Post comment (input)">
<button class="button" type="submit">Post comment (button)</button>
Pill-like buttons with a primary action:
<a href="#" class="button pill primary">Create Project</a>
<a href="#" class="button pill">Create Other</a>
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>
If you need a bigger or smaller buttons you can get them easily by addind the
class tiny
, small
, little
, big
, huge
, great
or giant
.
<a href="#" class="button tiny">Edit comment</a>
<a href="#" class="button huge">Create Project</a>
<a href="#" class="button giant">Sign Up</a>
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>
If you have a button that triggers a save action, this can be indicated by
adding the safe
class.
<a href="#" class="button safe">Save the world</a>
Groups of buttons can be created by adding a classes
g-first
, g-item
, g-last
and next-g
or previous-g
to the group
elements. Use next-g
or previous-g
classes to add margin between the
button groups in one row.
<a href="#" class="button safe g-first">+</a>
<a href="#" class="button danger g-last next-g">-</a>
<a href="#" class="button g-first">Publish</a>
<a href="#" class="button g-item">Edit</a>
<a href="#" class="button g-last">Delete</a>
info
Plugins can be used to control buttons behaviour, or to add new functions.
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 minor-group">
<a href="#" class="button">Inbox</a>
<a href="#" class="button">Drafts</a>
<a href="#" class="button">Sent</a>
<a href="#" class="button">Spam</a>
<a href="#" class="button">Trash</a>
</div>
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">Admin</a>
<div class="button-group">
<a href="#" class="button primary">Unwatch</a>
<a href="#" class="button">Fork</a>
<a href="#" class="button">Pull Request</a>
</div>
<div class="button-group minor-group">
<a href="#" class="button">10 Watchers</a>
<a href="#" class="button">1 Forks</a>
</div>
</div>
Full support: Firefox 3.5+, Chrome 3+, Safari 4+, IE 9+, Opera 11.10+
Good support: Firefox 3+, Chrome 1+, Safari 4+, IE 8+, Opera 10+
Issues in older versions of browsers.
IE 6:
- button icons and gradient is supported only trough additional fixer-skin (ie67.css)
- rounded corners and pill-like buttons is not supported
- size issues with
<button>
and<input>
elements - issues in Advanced Groups plugin
IE 7:
- button icons and gradient is supported only trough additional fixer-skin (ie67.css)
- rounded corners and pill-like buttons is not supported
- size issues with
<button>
and<input>
elements
IE 8:
- gradient is supported only trough additional fixer-skin (ie67.css)
- rounded corners and pill-like buttons is not supported
Opera 10, 11.00:
- CSS3 gradient is not supported
Public domain: http://unlicense.org
Originally it was a fork of Nicolas Gallagher's CSS3 GitHub Buttons, but it grows up to a separate project.
Project evolution: GitHub → David Walsh's GitHub-Style Buttons with CSS and JavaScript → Michael Henriksen's CSS3 Buttons → Nicolas Gallagher's CSS3 GitHub Buttons → gButtons → Milk CSS3 UI Framework (You are here).
Icons from Iconic pack by some random dude. Licensed as CC Attribution-Share Alike 3.0.