<p>
  A 100% flat button
  <button class="button">Press Me</button>
</p>

<p>
  A not-quite-flat button
  <button class="button--happy">Press Me</button>
</p>

<p class="question">
  Which do you enjoy more?
</p>

@import "compass/css3";

body {
  text-align: center;
  padding: 50px;
}

button {
  display: block;
  margin: 0 auto;
  border: none;
  background-color: transparent;
}

$color-button: #f16739;

.button {
  font-size: 2em;
  color: $color-button;
  border: 2px solid $color-button;
  padding: 1em 3em;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 100;
  margin: .25em auto;
  
  &:hover {
    color: white;
    background-color: $color-button;
    border-color: darken($color-button, 5%);
    outline: none;
  }
  
  &:active {
    color: white;
    outline: none;

    background-color: saturate($color-button, 20%);
  }
}


.button--happy {
  @extend .button;
  
  box-shadow: 1px 1px 1px rgba(0,0,0,.2);
  
  &:active {
    border-top-color: darken($color-button,15%);
    border-left-color: darken($color-button,15%);
    
    box-shadow: inset 2px 2px 2px rgba(0,0,0,.2);
    border-top-color: darken($color-button,10%);
    border-left-color: darken($color-button,10%);
  }
}

p {
  margin-bottom: 2em;
}

.question {
  font-size: .8em;
  font-style: italic;
}