<div class="container">
  <!-- requires the ontouchstart="" to re-enable the :active pseudo class for mobile safari -->
  <a class="button" ontouchstart=""><span>Click Me!</span></a>
</div>

@import "compass/css3";

// Font

@import url(https://fonts.googleapis.com/css?family=Changa+One);
$font : 'Changa One', arial, serif;

// Flexbox Center

html, body {
  height: 100%;
  width: 100%;
}

body {
  background-color: #eee;
  -webkit-transform: translate3d(0, 0, 0); // fixes white flash in chrome
}

// Lookit ALL da COLORS

$button: #008752; // base color for button
$button-dark: $button / 1.125;
$button-shadow: $button / 1.75;

// Button Styles

.button span {
  display: inline-block;
  font-size: 2em;
  font-family: $font;
  padding: .625em 1em;
  background: $button; 
  @include background-image(linear-gradient($button, $button-dark));
  border-top: 1px solid rgba(255,255,255,.2);   
  border-bottom: 1px solid rgba(0,0,0,.2); 
  text-shadow: 0 -1px 1px rgba(7, 51, 34,.8); 
  @include border-radius(8px);
  @include transition(transform 0.2s ease-in-out);  
}

.button {
  display: inline-block;
  color: #eff6ec;
  text-decoration: none;
  cursor: pointer;
  @include border-radius(8px);
  @include box-shadow(0 8px 0 $button-shadow, 0 10px 15px rgba(0,0,0,.35));
  @include transition(box-shadow 0.2s ease-in-out);
}

.button:active {
  @include box-shadow(0 8px 0 $button-shadow, 0 7px 10px rgba(0,0,0,.25)); // pressed state
}

.button:active span {
  @include translateY(4px);
}

.container {
  max-width: 60em;
  margin: 2em auto;
  text-align: center;
}