Skip to content

Instantly share code, notes, and snippets.

@katepdonahue
Created December 31, 2013 19:48
Show Gist options
  • Select an option

  • Save katepdonahue/8201396 to your computer and use it in GitHub Desktop.

Select an option

Save katepdonahue/8201396 to your computer and use it in GitHub Desktop.
CSS for a button from this CodePen challenge: http://codepen.io/mobify/pen/GtqKj
/*
INSTRUCTIONS
Using CSS properties alone, recreate this button:
http://i.imgur.com/gnZnY.png.
Spend no longer than 15 minutes on it, we don't
expect it to be a perfect match. It's open book,
feel free to hit Google but be prepared to
explain your solution.
*/
a {
margin: 3%;
display: inline-block;
padding: 10px 18px;
color: #505050;
font: bold 20px Helvetica, sans-serf;
border-radius: 9px;
text-shadow: 0 1px white;
text-transform: uppercase;
text-decoration: none;
box-shadow:
0 1px 2px 2px rgba(97, 97, 97, 0.7),
0 0 0 8px rgba(200, 200, 200, 1),
0 0 0 10px rgba(255, 255, 255,1),
0 0 0 12px rgba(102, 102, 102, 1),
0 2px 4px 16px #eee;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(40%, #bbbbbb), color-stop(100%, #aaaaaa));
}
a:before, a:after{
color: #808080;
content: '\2605'
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment