Fancy CSS Button

by andyjmeyers

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<br />
<span class="button">
 checkout
</span>

CSS

.button{
  margin-left:10px;
  text-transform:uppercase;
  color:#444444;
  font-family:sans-serif;
  font-weight:bold;
  font-size: 14px;
  border-radius: 5px;
  border:.5px solid #aaaaaa;
  background: linear-gradient(180deg, #eeeeee, #aaaaaa);
  box-shadow:  0 0 1px 1px #666666, 
            0 0 0 6px #dddddd,
            0 0 0 8px #ffffff,
            0 0 0 10px #888888;
  padding: 10px;
  width:auto;
}

.button::before{
   font-family: FontAwesome;
   color:#999999;
   content: "\f005";
}

.button::after{
   font-family: FontAwesome;
   color:#999999;
   content: "\f005";
}