Skip to content

Instantly share code, notes, and snippets.

@aral
Created June 5, 2012 07:31
Show Gist options
  • Save aral/2873331 to your computer and use it in GitHub Desktop.
Save aral/2873331 to your computer and use it in GitHub Desktop.
A simple shiny CSS rounded button
/*
Apply to a <button>
Just playing, during Lea Verou's CSS3 workshop at NDC Oslo.
Released under the MIT License. http://en.wikipedia.org/wiki/MIT_License
*/
font-size:1em;
border-radius: 1em;
text-shadow: 1px 1px 0 hsla(0, 0%, 100%, 0.5);
background-image: linear-gradient(
hsla(0, 0%, 100%, 0.7),
hsla(0, 0%, 100%, 0.6) 50%,
hsla(0, 0%, 100%, 0.4) 50%,
hsla(0, 0%, 100%, 0.0) 90%,
hsla(0, 0%, 100%, 0.0) 100%,
rgba(0, 0, 0, 0.2) 100%);
box-shadow: 0px 0.15em 2px -0.1em rgba(0, 0, 0, .4), 1px 1px 0px white inset, -1px -1px 0px hsla(0, 0%, 100%, 0.4) inset;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment