Checkout Button

Checkout Button.markdown

Checkout Button

index.html

<!-- do not change the markup -->
<a href="#">
  Checkout
</a>

style.css

/*
    
    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 {
  display: inline-block;
  padding: 18px 22px;
  border-radius: 12px;
  color: #555;
  text-transform: uppercase;
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  font-size: 24px;
  text-shadow: 1px 1px 0 #fff;
  box-shadow: 
    0 0 2px 2px #555555, 
    0 0 0 8px #cbcbcb, 
    0 0 0 10px #ffffff, 
    0 0 0 14px #555555;
}

a:before,
a:after {
  content: '★';
  color: #888;
}

a {
  background: #e2e2e2;
  background: -moz-linear-gradient(top, #e3e3e3 0%, #b0b0b0 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #e3e3e3), color-stop(100%, #b0b0b0));
  background: -webkit-linear-gradient(top, #e3e3e3 0%, #b0b0b0 100%);
  background: -o-linear-gradient(top, #e3e3e3 0%, #b0b0b0 100%);
  background: -ms-linear-gradient(top, #e3e3e3 0%, #b0b0b0 100%);
  background: linear-gradient(to bottom, #e3e3e3 0%, #b0b0b0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#b0b0b0', GradientType=0 );
}