Skip to content

Instantly share code, notes, and snippets.

@maxp
Created March 28, 2012 09:20
Show Gist options
  • Select an option

  • Save maxp/2224995 to your computer and use it in GitHub Desktop.

Select an option

Save maxp/2224995 to your computer and use it in GitHub Desktop.
.magicButton
{
color: #444;
font: bold 16px arial;
background: #e4e4e4;
background-origin: padding-box, border-box;
background-clip: padding-box, border-box;
border: 1px solid transparent;
border-radius: 3px;
padding: 8px 12px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
outline: 0;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25);
background-image: linear-gradient(#f2f2f2, #e4e4e4 50%), linear-gradient(#e4e4e4, #ccc);
background-image: -o-linear-gradient(#f2f2f2, #e4e4e4 50%), -o-linear-gradient(#e4e4e4, #ccc);
background-image: -ms-linear-gradient(#f2f2f2, #e4e4e4 50%), -ms-linear-gradient(#e4e4e4, #ccc);
background-image: -moz-linear-gradient(#f2f2f2, #e4e4e4 50%), -moz-linear-gradient(#e4e4e4, #ccc);
background-image: -webkit-linear-gradient(#f2f2f2, #e4e4e4 50%), -webkit-linear-gradient(#e4e4e4, #ccc);
}
.magicButton:active
{
color: #666;
position: relative;
top: 1px;
text-shadow: 0 -1px #fff;
box-shadow: inset 0 1px 4px 1px rgba(0,0,0,0.1), inset 0 6px 14px rgba(0,0,0,0.07), 0 1px #fff;
background-image: -linear-gradient(#f0f0f0, #e0e0e0 50%), linear-gradient(#cfcfcf, #c6c6c6);
background-image: -o-linear-gradient(#f0f0f0, #e0e0e0 50%), -o-linear-gradient(#cfcfcf, #c6c6c6);
background-image: -ms-linear-gradient(#f0f0f0, #e0e0e0 50%), -ms-linear-gradient(#cfcfcf, #c6c6c6);
background-image: -moz-linear-gradient(#f0f0f0, #e0e0e0 50%), -moz-linear-gradient(#cfcfcf, #c6c6c6);
background-image: -webkit-linear-gradient(#f0f0f0, #e0e0e0 50%), -webkit-linear-gradient(#cfcfcf, #c6c6c6);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment