Skip to content

Instantly share code, notes, and snippets.

@philippbosch
Created February 24, 2012 10:14
Show Gist options
  • Save philippbosch/1899941 to your computer and use it in GitHub Desktop.
Save philippbosch/1899941 to your computer and use it in GitHub Desktop.
Untitled
body {
text-align: center;
margin-top: 100px;
background: #CCC;
}
button {
font-size: 128px;
font-weight: bold;
border-radius: 20px;
background: linear-gradient(top, #CCC, #EEE, #DDD);
border: none;
width: 200px;
height: 200px;
line-height: 200px;
position: relative;
box-shadow:
rgba(255,255,255,.5) 0 2px 2px inset,
rgba(0,0,0,0.5) 0 -2px 2px inset,
rgba(0,0,0,.9) 0 0 2px 5px;
}
button span {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
button span:after {
content: "⌘";
position: absolute;
top: 1px;
left: 0;
right: 0;
z-index: 3;
color: rgba(0,0,0,0);
background: radial-gradient(50% 0%, circle cover,
rgba(255,255,255,0.1), rgba(255,255,255,0.3) 47%, rgba(255,255,255,0) 47%, rgba(255,255,255,0)), linear-gradient(top, #666, #222);
-webkit-background-clip: text;
}
button span:before {
content: "⌘";
position: absolute;
top: 2px;
left: 0;
right: 0;
color: #FFF;
}
<button><span>&#8984;</span></button>
{"view":"split","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment