Skip to content

Instantly share code, notes, and snippets.

@mrcgrtz
Created April 23, 2010 11:38
Show Gist options
  • Save mrcgrtz/376456 to your computer and use it in GitHub Desktop.
Save mrcgrtz/376456 to your computer and use it in GitHub Desktop.
Scalable CSS3 gradient buttons
/* @group Buttons */
button , .button {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
cursor: pointer;
color: #fff;
background: #f60;
background: #f60 -moz-linear-gradient(top, #ff8f00, #ff4f00);
background: #f60 -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff8f00), color-stop(1, #ff4f00));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff8f00', EndColorStr='#ff4f00');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff8f00', EndColorStr='#ff4f00')";
width: auto;
height: auto;
font: bold 1em/normal FreeSans, Arial, sans-serif;
text-decoration: none !important;
text-align: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
vertical-align: middle;
margin: 0;
padding: .5em 2em;
outline: 0 none !important;
border: 1px solid #ff7e00;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-box-shadow: inset .1em .1em 0 rgba(255, 255, 255, .2);
-webkit-box-shadow: inset .1em .1em 0 rgba(255, 255, 255, .2);
box-shadow: inset .1em .1em 0 rgba(255, 255, 255, .2);
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
button:hover , .button:hover ,
button:focus , .button:focus {
color: #fff;
background: #f60 -moz-linear-gradient(top, #ff9c1c, #d44200);
background: #f60 -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff9c1c), color-stop(1, #d44200));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff9c1c', EndColorStr='#d44200');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff9c1c', EndColorStr='#d44200')";
}
button:active , .button:active {
color: #fff;
background: #f60 -moz-linear-gradient(top, #bb6900, #fc7100, #ff5b12);
background: #f60 -webkit-gradient(linear, left top, left bottom, color-stop(0, #8b6900), color-stop(.5, #fc7100), color-stop(1, #ff5b12));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#bb6900', EndColorStr='#ff5b12');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#bb6900', EndColorStr='#ff5b12')";
}
/* @group Disabled Buttons */
button[disabled] , .button[disabled] , .button.disabled {
cursor: not-allowed;
opacity: .5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}
/* @end */
/* @group Big Buttons */
.button-big {
font-size: 1.75em;
}
/* @end */
/* @group Tiny Buttons */
.button-tiny {
padding: .1em 1em;
font-size: .9em;
}
/* @end */
/* @group Browser-specific fixes */
button::-moz-focus-inner , .button::-moz-focus-inner {
/* this fixes weird inner offset in Gecko */
border: 0 none;
padding: 0;
}
/* @end */
/* @end */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment