Skip to content

Instantly share code, notes, and snippets.

@alialo
Created July 26, 2012 21:24
Show Gist options
  • Save alialo/3184630 to your computer and use it in GitHub Desktop.
Save alialo/3184630 to your computer and use it in GitHub Desktop.
CSS Button
.button {
width: 120px;
display: block;
margin: 28px auto;
padding: 6px 10px;
background: transparent;
cursor: pointer;
outline: none;
border: 1px solid #999;
text-shadow: 0 1px 1px #fff;
font-weight: bold;
background: -webkit-linear-gradient(top, #fff, #e0e0e0);
background: -moz-linear-gradient(top, #fff, #e0e0e0);
background: -ms-linear-gradient(top, #fff, #e0e0e0);
background: -o-linear-gradient(top, #fff, #e0e0e0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #666;
}
.button:active {
border: 1px solid #aaa;
border-bottom-color: #ccc;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow: inset 0 1px 2px #aaa;
box-shadow: inset 0 1px 2px #aaa;
background: -webkit-linear-gradient(top, #e6e6e6, #dcdcdc);
background: -moz-linear-gradient(top, #e6e6e6, #dcdcdc);
background: -ms-linear-gradient(top, #e6e6e6, #dcdcdc);
background: -o-linear-gradient(top, #e6e6e6, #dcdcdc);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment