<button type="button" class="btn normal squash_stretch secondary_action">送信</button>

body {
  padding: 50px;
}
.btn {
  border: none;
  padding: 15px 20px 17px;
  appearance: none;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  font-weight: bold;
  position: relative;
  box-sizing: border-box;
  background: none;
  cursor: pointer;
  transition: all cubic-bezier(0.16, 0.77, 0.36, 1) 200ms;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: #294d77;
    transition: all cubic-bezier(0.16, 0.77, 0.36, 1) 200ms;
    z-index: -1;
    box-shadow: 0 0 0 0 rgba(#294d77, 0.2);
  }
  &:hover,
  &:active,
  &:focus {
    outline: none;
  }
  &.secondary_action {
    &:hover {
      transform: translateY(-5px);
    }
    &:active {
      transform: translateY(0px);
    }
  }
  &.squash_stretch {
    &:hover {
      &::after {
        box-shadow: 0 10px 5px 0 rgba(#294d77, 0.4);
        transform: scale(1.1);
      }
    }
    &:active {
      &::after {
        transform: scale(0.9);
        box-shadow: 0 5px 5px 0 rgba(#294d77, 0.4);
      }
    }
  }
  &.normal {
    &:hover {
      &::after {
        filter: brightness(1.7);
      }
    }
    &:active {
      &::after {
        filter: brightness(2);
      }
    }
  }
}