necolas / css3-github-buttons

Helps you easily create GitHub-style buttons and toolbars using links, buttons, and inputs.

CSS3 GitHub Buttons

CSS3 GitHub Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs.

Example: necolas.github.io/css3-github-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 (link)</a>
<input class="button" type="submit" value="Post comment (input)">
<button class="button" type="submit">Post comment (button)</button>

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>

Big buttons

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

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

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 minor-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>

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>

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>

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.

css3-github-buttons's Issues

button element cant use "button icon search"

this button's style can't show ico

Active state results in white shadow on white text.

Adding text-shadow: -1px -1px 0 rgba(0,0,0,0.3); to button.active fixes the problem, but doesn't allow for a hover state on a button set as:

<a class="button active">Button Text</a>

Sample: http://cl.ly/6RYy

text-align center by default

If you set display block on button, than the text is not centered.
It would be nice if button has text-align center by default.
Example:
http://jsfiddle.net/fPumJ/10/

disabled buttons shouldn’t have hover effect

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

button doesn't display the image in my browser and I cannot find the way you actually catch it. There is no background-image: url(...) in your gh-buttons.css and I cannot find any link in in your html - index.html.

I just copy gh-buttons.css in my default stylesheet dir and gh-icons.png in relative image dir ...., I'm not a front-end designer sorry, can you help me ?

b.t.w. I'm using Firefox 5.0
thanks in advance
Luca

Opera 11.11 buttons remains pressed after click

Same in IE8, could you please fix it?

Thanks ;)

Insert span tag inside a link tag by using Cake php

I have a issue . I cant write a span tag inside a link tak likre this ...

Eg: Html->link(__('Edit', true), array('action' => 'edit', $Data, array('class' => 'button')); ?>

I want to add like this ..

Edit

Please any boy help me?

.active icons

Thanks for this really neat little collection.

Since there is a rule for:

• .button.active class

would it make sense also to have one for:

• .button.[icon_name].icon.active:before

so that anchors marked active in the HTML will have the appropriate icon colour?

issues with opera 11.10

http://imgur.com/jvE8T

Icons not working on Input

Adding "icon add", for example, to a class on an input element doesn't actually add the icon.

Useless background-color definition

Hello,

It's not a real issue but you have defined background-color for ".button-group.minor-group .button:active" twice.

Line 373 :

.button-group.minor-group .button:hover,
.button-group.minor-group .button:focus,
.button-group.minor-group .button:active {
    background-color: #599bdc;
}

.button-group.minor-group .button:active,
.button-group.minor-group .button.active {
    background-color: #3072b3;
}

Should be :

.button-group.minor-group .button:hover,
.button-group.minor-group .button:focus {
    background-color: #599bdc;
}

.button-group.minor-group .button:active,
.button-group.minor-group .button.active {
    background-color: #3072b3;
}

IE 7 - 9 show click style after mouseout.

Under IE 7 - 9 when you click on a button that does not cause a postback to be sent IE will continue to apply the hover and click style to the button until you click on something other than the button even after mouseout.

I've corrected this issue in my local copy by removing the .button:focus selector from line 42. Not sure if this is truly an issue or should just be noted as a side effect.

button primary pill

button primary pill seems to have 1px padding too much, its style="padding-bottom: 11px;" by default, which causes this: http://imgur.com/GKHy3

setting style="padding-bottom: 11px;" to 10px seems to solve the issue

Icon doesn't work on input button

Icon does not show up in the button. Icon works well for the link but not for the button.

First name:
Last name: