Sassy Ghost Button

@mixin ghost-button {
  font: $button-font;
  background-color: transparent;
  border-color: $main-color;
  border-width: 2px;
  border-radius: 30px;
  color: $main-color;
  font-size: 1.2em;
  height: 50px;
  width: 170px;
  transition: background-color 0.3s ease-out,
            border-color 0.3s ease-out;
  @include small-screens {
    font-size: .8em;
    height: 40px;
    width: 120px;

  }

  &:hover {
    background-color: $main-color;
    background-color: rgba(255, 255, 255, 0.4);
    border-color: $main-color;
    border-color: rgba(255, 255, 255, 0.4);
  }

  &:active{
    background-color: rgba(255, 255, 255, 0.8);;
    color: white;
    border-color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
  }
}