<div class="container">
  <a href="javascript:void(0);" class="btn whooooa">ZOIDBERG</a>
  <h1>Flat Button Family</h1>
  <a href="javascript:void(0);" class="btn">Snap</a>
  <a href="javascript:void(0);" class="btn inverse">Inverse</a>
  <p>Nearly flat buttons.</p>
  
  
  <a href="javascript:void(0);" class="btn winner">Winner</a>
    <a href="javascript:void(0);" class="btn create">Create</a>
  <a href="javascript:void(0);" class="btn avoid">Avoid</a>
  <a href="javascript:void(0);" class="btn danger">Unsubscribe</a>
   <p></p>
<a href="javascript:void(0);" class="btn winner" style="border-radius:0">SANS-RADIUS</a>
</div>
  <div class="lightbg">

  <p>Working Composites.</p>
  <a href="javascript:void(0);" class="btn">Snap</a>
  <a href="javascript:void(0);" class="btn winner ">Winner</a>
    <a href="javascript:void(0);" class="btn create ">Avoid</a>
  <a href="javascript:void(0);" class="btn avoid">Create</a>
    <a href="javascript:void(0);" class="btn danger">Unsubscribe</a>
   
    <hr />
    <a href="javascript:void(0);" class="btn winner inverse ">Winner</a>
    <a href="javascript:void(0);" class="btn create inverse">Create</a>
  <a href="javascript:void(0);" class="btn avoid inverse">Avoid</a>
  
</div>

/*
  I'm digging this simple border-bottom effect.

  No transitions, no gradients, etc, just a flat style for buttons.
*/
html {  
}
hr {
  border: none;
}
body {
  background: #222;
  font-family: "Advent Pro";
  color: white;
}
.container {
  background: #333;
}
.btn:hover {
  border-bottom-width: 4px;
  margin-bottom: 22px;
}
.btn {
  display: inline-block;
  vertical-align: top;
  padding: 8px 14px 10px;
  margin-top: 1px;
  margin-bottom: 25px;
  border: 1px solid;
  color: white;
  border-radius: 9px;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;

  &.inverse {
    color: #222;
    background-color: white;
    border-color: #b7b7b7;
  }
  & + .btn {
    margin-left: 0.5em;
  }
  &.create {
    color: lightgreen;
  }
  &.winner {
    color: skyblue;
  }
  &.avoid {
    color: tomato;
  }
  &.danger {
    border-color: transparent;
    color: salmon;
  }
}
.lightbg .btn {
  color: #111;
  
  & + .btn {
    margin-left: 0.5em;
  }
  
  &.create {
    color: tomato;
  }
  &.winner {
    color: deepskyblue;
  }
  &.avoid {
    color: forestgreen;
  }
  &.danger {
    border-color: transparent;
    color: salmon;
  }
}

.btn:hover {
  &.winner {
  }
  &.avoid {
  }
  &.danger {
    color: tomato;
    margin-bottom: 24px;
    border: 1px dotted;
  }
}

.btn.whooooa {
  float: right;
  margin-right: 1px;
  padding-bottom: 8px;
  font-size: 22px;
  opacity: 0.06;
  -webkit-transition: all .8s ease-out;
}
.btn.whooooa:hover {
color: firebrick;
opacity: 0.96;
border: 4px double;
border-bottom: 34px dashed;
border-top: 6px double;
padding-top: 18px;
}

.container,
.lightbg {
  text-align: left;
  max-width: 700px;
  margin: 50px auto 32px;
  padding: 30px;
  border-left: 1px solid;
}
.lightbg {
  margin-top: 32px;
  color: #111;
  background: whiteSmoke;
  border-style: dashed;
}

h1 {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 200;
  line-height: 30px;
}
p {
  margin: 16px 0;
}

hr {
  color: #777; 
}

a {
  color: whiteSmoke;
}