Buttons

Simple CSS for buttons.

@import "_variables.scss";

Default Buttons

To create a Pure Button, add the cw-button classname to any <a> or <button> element.

.cw-button {
    /* Structure */
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.cw-button::-moz-focus-inner {
    /* Firefox: Get rid of the inner focus border */
    padding: 0;
    border: 0;
}

.cw-button {
    font-family: inherit;
    font-size: 100%;
    padding: 0.5em 1em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}

.cw-button-hover,
.cw-button:hover,
.cw-button:focus {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.cw-button:focus {
    outline: 0;
}

.cw-button::-moz-focus-inner{
    /* Firefox: Get rid of the inner focus border */
    padding: 0;
    border: 0;
}

Active Buttons

To style a button so that it appears "pressed", add the cw-button-active classname alongside `cw-button.

.cw-button-active,
.cw-button:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
    border-color: #000\9;
}

Disabled Buttons

To mark a button as disabled, add the cw-button-disabled classname alongside cw-button.

.cw-button[disabled],
.cw-button-disabled,
.cw-button-disabled:hover,
.cw-button-disabled:focus,
.cw-button-disabled:active {
    border: none;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    filter: alpha(opacity=40);
    -khtml-opacity: 0.40;
    -moz-opacity: 0.40;
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}

Hidden Buttons

To hide a button, add the cw-button-hidden classname alongside cw- button.

.cw-button-hidden {
    display: none;
}

Primary Buttons

To indicate that a button represents a primary action, add the cw-button-primary classname alongside cw-button.

.cw-button-primary,
.cw-button-selected,
a.cw-button-primary,
a.cw-button-selected {
    background-color: rgb(0, 120, 231);
    color: #fff;
}

Customizing Buttons

Thanks to Pure's minimal styling, it is easy to build off of the generic Pure button and create customized buttons for your own application.

To customize button styles, you should group your custom CSS into a class such as cw-button-foo, which you can then add to an element that already has the cw-button classname. Here are some examples.

Special-purpose Buttons

.cw-button-success,
.cw-button-error,
.cw-button-warning,
.cw-button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.cw-button-success {
    background: rgb(28, 184, 65); /* this is a green */
}

.cw-button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.cw-button-warning {
    background: rgb(223, 117, 20); /* this is an orange */
}

.cw-button-secondary {
    background: rgb(66, 184, 221); /* this is a light blue */
}

Buttons with different sizes

.cw-button-xsmall {
    font-size: 70%;
}

.cw-button-small {
    font-size: 85%;
}

.cw-button-large {
    font-size: 110%;
}

.cw-button-xlarge {
    font-size: 125%;
}

Buttons with icons

Pure doesn't ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Pure Buttons is easy. In the example below, we're using icon fonts from Font Awesome. Put the Font Awesome CSS file on your page and use an element within a cw-button element.