Skip to content

Instantly share code, notes, and snippets.

@epicserve
Created July 31, 2010 20:13
Show Gist options
  • Save epicserve/502562 to your computer and use it in GitHub Desktop.
Save epicserve/502562 to your computer and use it in GitHub Desktop.
/**
* SEXY BUTTONS
* -------------------------------------------------------------------- */
a.btn {
text-decoration: none;
}
a.btn, input[type=submit], input[type=button] {
cursor: pointer;
padding: 10px;
border: none;
border-top: 1px solid #eee;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#999'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ddd, #999); /* for firefox 3.6+ */
color: #444;
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, .5);
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 2px rgba(0, 0, 0, .5);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
a.btn:hover, input[type=submit]:hover, input[type=button]:hover {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaa', endColorstr='#444'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#444)); /* for webkit browsers */
background: -moz-linear-gradient(top, #aaa, #444); /* for firefox 3.6+ */
color: #fff;
border-top: solid 1px #ccc;
text-shadow: 0 1px 0 rgba(0, 0, 0, .65);
}
a.btn:active, input[type=submit]:active, input[type=button]:active {
background: #444; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#aaa'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#aaa)); /* for webkit browsers */
background: -moz-linear-gradient(top, #444, #aaa); /* for firefox 3.6+ */
color: #fff;
border-top: solid 1px #999;
text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment