Buttonize.

The Instant Button Companion v3.1

.buttonize .large .small .square .pill
.highlight .disabled .bold .italic .underline
.left.middle.middle.right .thick .dark
.red .green .blue .orange .purple
.arrow-left .arrow-right .heart

About

Buttonize is a simple, light-weight (6kb) CSS file containing precompiled styles and colours for quick, modern looking buttons. It uses CSS3 for rounded corners and subtle gradients, with fallbacks for older browsers.

Licenced Under MIT & GPL - so it's free!

Download ButtonizeView Source

...Or download it as a .Zip.

Share & Enjoy

How to Install

1) Download the latest copy of Buttonize

2) Add the Stylesheet to <head>

<link rel="stylesheet" href="buttonize3.min.css">

3) Add a button

<a href="#" class="buttonize heart">Buttonize</a>

Result: Buttonize ... Easy!

Compatability

/*
 * BUTTONIZE v3.1 : Licensed under MIT & GPL
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
 * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE 
 * OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 * 
 * Created by Edd Turtle (www.eddturtle.co.uk)
 * More Info @ www.css3framework.co.uk
 */


/** Default **/

.buttonize {
	display: inline-block;
	padding: .4em .7em;
	border: 1px solid #666;
	border-radius: 8px;
	background-color: #CCC;
	background-image: -webkit-linear-gradient(top, #DDD, #BBB);
	background-image: -moz-linear-gradient(top, #DDD, #BBB);
	background-image: linear-gradient(top, #DDD, #BBB);
}

.buttonize:link, 
.buttonize:visited,
.buttonize:hover,
.buttonize:active {
	text-decoration: none;
	color: #444;
}

.buttonize:hover {
	background-color: #BBB;
	background-image: -webkit-linear-gradient(top, #DDD, #AAA);
	background-image: -moz-linear-gradient(top, #DDD, #AAA);
	background-image: linear-gradient(top, #DDD, #AAA);
}

.buttonize:active {
	background: #CCC;
}


/** Large **/

.buttonize.large {
	font-size: 1.4em;
}


/** Small **/

.buttonize.small {
	font-size: .7em;
}


/** Square **/

.buttonize.square {
	border-radius: 0;
}


/** Pill **/

.buttonize.pill {
	border-radius: 999px;
}



/** Highlight **/

.buttonize.highlight {
	-webkit-animation: "pulse" 1s ease-in-out 0 infinite alternate;
	-moz-animation: "pulse" 1s ease-in-out 0 infinite alternate;
	animation: "pulse" 1s ease-in-out 0 infinite alternate;
	box-shadow: 0px 0px 4px #00ACE6;
}

@-webkit-keyframes pulse
{
	0% {
		box-shadow: 0px 0px 4px #00ACE6;
	}
	100% {
		box-shadow: 0px 0px 12px #00ACE6;
	}
}

@-moz-keyframes pulse
{
	0% {
		box-shadow: 0px 0px 4px #00ACE6;
	}
	100% {
		box-shadow: 0px 0px 12px #00ACE6;
	}
}

@keyframes pulse
{
	0% {
		box-shadow: 0px 0px 4px #00ACE6;
	}
	100% {
		box-shadow: 0px 0px 12px #00ACE6;
	}
}


/** Disabled **/

.buttonize.disabled {
	opacity: .5;
	cursor: default;
}

.buttonize.disabled:hover,
.buttonize.disabled:active {
	background-color: #CCC;
	background-image: -webkit-linear-gradient(top, #DDD, #BBB);
	background-image: -moz-linear-gradient(top, #DDD, #BBB);
	background-image: linear-gradient(top, #DDD, #BBB);
}

/** Bold, Italic & Underline **/

.buttonize.bold {
	font-weight: bold;
}

.buttonize.italic {
	font-style: italic;
}

.buttonize.underline {
	text-decoration: underline;
}


/** Left, Middle & Right **/

.buttonize.left {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: 0;
	border-right-width: 0;
}

.buttonize.middle {
	border-radius: 0;
	margin-left: 0;
	margin-right: 0;
	border-right-width: 0;
}

.buttonize.right {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: 0;
}


/** Thick Border **/

.buttonize.thick {
	border-width: 2px;
}


/** Coloured **/

/* Dark */
.buttonize.dark,
.buttonize.dark:link,
.buttonize.dark:visited {
	background-color: #333;
	background-image: -webkit-linear-gradient(top, #555, #222);
	background-image: -moz-linear-gradient(top, #555, #222);
	background-image: linear-gradient(top, #555, #222);
	border-color: #000;
	color: #FFF;
}

.buttonize.dark:hover {
	background-color: #CC0000;
	background-image: -webkit-linear-gradient(top, #555, #222);
	background-image: -moz-linear-gradient(top, #555, #222);
	background-image: linear-gradient(top, #555, #222);
}

.buttonize.dark:active {
	background: #333;
}


/* Red */
.buttonize.red,
.buttonize.red:link,
.buttonize.red:visited {
	background-color: #E60000;
	background-image: -webkit-linear-gradient(top, #FF1A1A, #E60000);
	background-image: -moz-linear-gradient(top, #FF1A1A, #E60000);
	background-image: linear-gradient(top, #FF1A1A, #E60000);
	border-color: #990000;
	color: #FFF;
}

.buttonize.red:hover {
	background-color: #CC0000;
	background-image: -webkit-linear-gradient(top, #FF1A1A, #CC0000);
	background-image: -moz-linear-gradient(top, #FF1A1A, #CC0000);
	background-image: linear-gradient(top, #FF1A1A, #CC0000);
}

.buttonize.red:active {
	background: #E60000;
}


/* Green */
.buttonize.green,
.buttonize.green:link,
.buttonize.green:visited {
	background-color: #5CB82E;
	background-image: -webkit-linear-gradient(top, #66CC33, #5CB82E);
	background-image: -moz-linear-gradient(top, #66CC33, #5CB82E);
	background-image: linear-gradient(top, #66CC33, #5CB82E);
	border-color: #006600;
	color: #FFF;
}

.buttonize.green:hover {
	background-color: #52A329;
	background-image: -webkit-linear-gradient(top, #66CC33, #52A329);
	background-image: -moz-linear-gradient(top, #66CC33, #52A329);
	background-image: linear-gradient(top, #66CC33, #52A329);
	color: #FFF;
}

.buttonize.green:active {
	background: #5CB82E;
}


/* Blue */
.buttonize.blue,
.buttonize.blue:link,
.buttonize.blue:visited {
	background-color: #007EBD;
	background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD);
	background-image: -moz-linear-gradient(top, #00A0F0, #007EBD);
	background-image: linear-gradient(top, #00A0F0, #007EBD);
	border-color: #0000CC;
	color: #FFF;
}

.buttonize.blue:hover {
	background-color: #006DA3;
	background-image: -webkit-linear-gradient(top, #00A0F0, #006DA3);
	background-image: -moz-linear-gradient(top, #00A0F0, #006DA3);
	background-image: linear-gradient(top, #00A0F0, #006DA3);
	color: #FFF;
}

.buttonize.blue:active {
	background: #007EBD;
}


/* Orange */
.buttonize.orange,
.buttonize.orange:link,
.buttonize.orange:visited {
	background-color: #FF9900;
	background-image: -webkit-linear-gradient(top, #FFAD33, #FF9900);
	background-image: -moz-linear-gradient(top, #FFAD33, #FF9900);
	background-image: linear-gradient(top, #FFAD33, #FF9900);
	border-color: #FF3300;
	color: #FFF;
}

.buttonize.orange:hover {
	background-color: #E68A00;
	background-image: -webkit-linear-gradient(top, #FFAD33, #E68A00);
	background-image: -moz-linear-gradient(top, #FFAD33, #E68A00);
	background-image: linear-gradient(top, #FFAD33, #E68A00);
	color: #FFF;
}

.buttonize.orange:active {
	background: #FF9900;
}


/* Purple */
.buttonize.purple,
.buttonize.purple:link,
.buttonize.purple:visited {
	background-color: #8A00E6;
	background-image: -webkit-linear-gradient(top, #A31AFF, #8A00E6);
	background-image: -moz-linear-gradient(top, #A31AFF, #8A00E6);
	background-image: linear-gradient(top, #A31AFF, #8A00E6);
	border-color: #660033;
	color: #FFF;
}

.buttonize.purple:hover {
	background-color: #7A00CC;
	background-image: -webkit-linear-gradient(top, #A31AFF, #7A00CC);
	background-image: -moz-linear-gradient(top, #A31AFF, #7A00CC);
	background-image: linear-gradient(top, #A31AFF, #7A00CC);
	color: #FFF;
}

.buttonize.purple:active {
	background: #8A00E6;
}


/** Arrows & Icons **/

.buttonize.arrow-left:before {
	content: "\2190";
	margin-right: 5px;
}

.buttonize.arrow-right:after {
	content: "\2192";
	margin-left: 5px;
}

.buttonize.heart:before {
	content: "\2665";
	margin-right: 5px;
}
Close Source Code