Skip to content

Instantly share code, notes, and snippets.

@sapegin
Created April 18, 2011 08:37
Show Gist options
  • Save sapegin/925002 to your computer and use it in GitHub Desktop.
Save sapegin/925002 to your computer and use it in GitHub Desktop.
CSS3 Buttons in Springhare
/* Button */
button, input[type="submit"] {
display: inline-block;
padding: 2px 20px;
background: #c4c4c4;
background: -webkit-linear-gradient(top, #eee, #c4c4c4);
background: -moz-linear-gradient(top, #eee, #c4c4c4);
background: -ms-linear-gradient(top, #eee, #c4c4c4);
background: -o-linear-gradient(top, #eee, #c4c4c4);
background: linear-gradient(top, #eee, #c4c4c4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = #eeeeee, EndColorStr = #c4c4c4);
border-radius: 3px;
border: 1px solid #ccc;
border-bottom-color: #aaa;
border-right-color: #aaa;
-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .05);
line-height: 18px;
height: 24px;
color: #4f4f4f;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
cursor: pointer;
}
button:enabled:hover {
background: -webkit-linear-gradient(top, #fcfcfc, #cacaca);
background: -moz-linear-gradient(top, #fcfcfc, #cacaca);
background: -ms-linear-gradient(top, #fcfcfc, #cacaca);
background: -o-linear-gradient(top, #fcfcfc, #cacaca);
background: linear-gradient(top, #fcfcfc, #cacaca);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = #fcfcfc, EndColorStr = #cacaca);
color: #333;
}
button:enabled:focus {
outline: 0;
border: 1px solid #8cabc1;
border-bottom-color: #76a6c8;
border-right-color: #76a6c8;
-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .05), 0 0 4px rgba(118, 166, 200, .4);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .05), 0 0 4px rgba(118, 166, 200, .4);
}
button:enabled:active {
position: relative;
margin-top: -1px;
top: 1px;
padding: 3px 20px 1px;
background: #cacaca;
background: -webkit-linear-gradient(top, #cacaca, #d9d9d9);
background: -moz-linear-gradient(top, #cacaca, #d9d9d9);
background: -ms-linear-gradient(top, #cacaca, #d9d9d9);
background: -o-linear-gradient(top, #cacaca, #d9d9d9);
background: linear-gradient(top, #cacaca, #d9d9d9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = #cacaca, EndColorStr = #d9d9d9);
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .1), 0 0 3px rgba(118, 166, 200, .3);
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .1), 0 0 3px rgba(118, 166, 200, .3);
border: 1px solid #8cabc1;
border-bottom-color: #a0b3c0;
border-right-color: #a0b3c0;
}
button:disabled {
cursor: default;
opacity: .5;
text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment