// Buttons
// --------------------------------------------------

@import "mixins";
@import "colors";
@import "sizes";

.Button {
  @include inline-block();
  border-radius: $sButtonBorderRadius;
  padding: 13px 29px;
  text-decoration:none;
  text-align: center;
}
.Button,
.Button span {
  font-size: $sFontSmallUpperCase;
  line-height: $sLineHeightButton;
  font-weight: $sFontWeightBold;
  color: white;
  text-transform: uppercase;
}
.Button:hover,
.Button span:hover { text-decoration:none }
.Button--main {
  background-color: $cHighlight-main;
  &:hover { background-color: rgba(#007FBD, 1) }
}
.Button--positive {
  background-color: $cHighlight-positive;
  &:hover { background-color: rgba(#7FA538, 1) }
}
.Button--negative {
  background-color: $cHighlight-negative;
  &:hover { background-color: rgba(#B93F37, 1) }
}
.Button--secondary {
  border: $sButtonBorder solid #CCCCCC;
  color: #666666;
  background-color: rgba(white, 1);
  &:hover {
    background-color: rgba(#CCCCCC, 1);
    color:white;
  }
}
.Button--overBlack {
  border: $sButtonBorder solid white;
  &:hover {}
}

// Buttons
// --------------------------------------------------

@import "mixins";
@import "colors";
@import "sizes";

.Button {
  @include display-flex();
  @include align-items(center, center);
  border-radius: $sButtonBorderRadius;
  padding: 0 29px;
  text-decoration:none;
  text-align: center;
  height: $sButtonHeight;
}
.Button,
.Button span {
  font-size: $sFontSmallUpperCase;
  line-height: $sLineHeightButton;
  font-weight: $sFontWeightBold;
  color: white;
  text-transform: uppercase;
}
.Button:hover,
.Button span:hover { text-decoration:none }
.Button--main {
  background-color: $cHighlight-main;
  &:hover { background-color: rgba(#007FBD, 1) }
}
.Button--positive {
  background-color: $cHighlight-positive;
  &:hover { background-color: rgba(#7FA538, 1) }
}
.Button--negative {
  background-color: $cHighlight-negative;
  &:hover { background-color: rgba(#B93F37, 1) }
}
.Button--secondary {
  border: $sButtonBorder solid #CCCCCC;
  color: #666666;
  background-color: rgba(white, 1);
  &:hover {
    background-color: rgba(#CCCCCC, 1);
    color:white;
  }
}
.Button--overBlack {
  border: $sButtonBorder solid white;
  &:hover {}
}

Set height as defined in style guide
Set height as defined in style guide

Use flexbox to position button texts in centre
