// ------------------------------------
// BUTTONS
// <button> and looks like a button
// ------------------------------------

// DEFAULT
.btn {
  margin: 0 0 $defaultWhitespace 0;
  padding: 0.4em 1em;
  border: 0;

  background-color: $greenColor;
  color: #fff;
  font-family: $headlineFont;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;

  outline: none;
  text-shadow: none;
  border: 2px solid $greenColor;

  &:hover {
    cursor: pointer;
    border: 2px solid $redColor;
  }
}

.btn-icon {
  float: left;
  margin-left: -0.2em;
  margin-right: 0.5em;
}


// ------------------------------------
// BUTTONS
// <button> and looks like a button
// ------------------------------------

// DEFAULT
.btn {
  margin: 0 0 $defaultWhitespace 0;
  padding: 0.4em 1em;
  border: 0;

  background-color: $greenColor;
  color: #fff;
  font-family: $headlineFont;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;

  outline: none;
  text-shadow: none;

  &:hover {
    cursor: pointer;
    background-color: $greenDarkColor;
  }
}

.btn-icon {
  float: left;
  margin-left: -0.2em;
  margin-right: 0.5em;
}

Add hover state for buttons
Add hover state for buttons
