Text Button

text_button.scss

// COLORS
$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;

$color-gray-light: #f7f7f7;
$color-gray-dark: #777;

$color-white: #fff;
$color-black: #000;

// FONT
$default-font-size: 1.6rem;


.btn-text {
  &:link,
  &:visited {
    color: $color-primary;
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid $color-primary;
    padding: 3px;
    font-size: $default-font-size;
    transition: all 0.2s;
  }

  &:hover {
    background-color: $color-primary;
    color: $color-white;
    box-shadow: 0 1rem 2rem rgba($color: $color-black, $alpha: 0.15);
    transform: translateY(-2px);
  }

  &:active {
    box-shadow: 0 0.5rem 1rem rgba($color: $color-black, $alpha: 0.15);
    transform: translateY(0);
  }
}