<div class="button1">button1</div>
  <div class="button2">button2</div>
  <div class="button3">button3</div>
  <div class="button4">button4</div>

body {
  margin: 0px;
  font-family: "Roboto Condensed", sans-serif;
}
@mixin default($bg_color: #17ccaa) {
  background: $bg_color;
  color: #333333;
  text-align: center;
  margin: 40px;
  text-decoration: none;
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
}

.button1 {
  @include default;
  transition-duration: 0.3s;
  transition-property: transform;

  &:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: "";
    left: calc(50% - 10px);
    bottom: 0;
    border-style: solid;
    border-width: 10px 10px 0px 10px; /*上右下左*/
    border-color: #17ccaa transparent transparent transparent;
    transition-duration: 0.3s;
    transition-property: bottom;
  }

  &:hover {
    transform: translateY(-5px) translateZ(0);
  }

  &:hover:before {
    bottom: -(10px);
  }
}

.button2 {
  @include default(none);
  border: solid 1px #17ccaa;

  &:before,
  &:after {
    position: absolute;
    content: "";
    width: 50%;
    background-color: #17ccaa;
    z-index: -1;
    height: 0px;
    transition: height 0.5s;
  }

  &:before {
    top: 0px;
    left: 0;
  }
  &:after {
    bottom: 0px;
    left: 50%;
  }

  &:hover {
    &:before,
    &:after {
      height: 100%;
    }
  }
}
.button3 {
  @include default(none);
  border: solid 1px #17ccaa;
  z-index: 1;
  transition: height 0.2s linear;
  color: #fff;
  &::before,
  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #17ccaa;
    transition: 0.2s linear;
  }
  &::before {
    top: 0;
  }
  &::after {
    bottom: 0;
  }
  &:hover {
    color: #17ccaa;
    &::before,
    &::after {
      height: 0;
      background-color: transparent;
    }
  }
}
.button4 {
  @include default(none);
  border: 2px solid #17ccaa;
  color: #17ccaa;
  overflow: hidden;
  &::before {
    position: absolute;
    top: 0;
    left: -5%;
    z-index: -1;
    content: "";
    width: 110%;
    height: 180%;
    background: #17ccaa;
    transform-origin: left bottom;
    transform: skewY(-10deg) scale(1, 0);
    transition: transform 0.3s;
  }
  &:hover {
    color: #fff;
    &::before {
      transform-origin: left top;
      transform: skewY(-10deg) scale(1, 1);
    }
  }
}