text 带动画的按钮

Posted 2021-04-30

.btn-border-dark-orange {
  @include button-variant-hover-bright(#483213, transparent, transparent);
  position: relative;
  padding: 0;
  font-weight: bold;
  border-radius: 0;

  @media (min-width: $screen-sm-min) {
    font-size: 16px;
  }

  &:before,
  &:after {
    position: absolute;
    display: block;
    width: 10%;
    height: 25%;
    border: 1px solid;
    transition: all .6s ease;
    content: "";
  }

  &:before {
    top: 0;
    left: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: #a39889;
    border-left-color: #a39889;
  }

  &:after {
    bottom: 0;
    right: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #a39889;
    border-right-color: #a39889;
  }

  &:hover {
    &:before,
    &:after {
      width: 100%;
      height: 100%;
      border-bottom-color: #a39889;
      border-right-color: #a39889;
      border-top-color: #a39889;
      border-left-color: #a39889;
    }

    &:before {
      top: 4px;
      left: 4px;
    }
  }

  &:active {
    @include box-shadow (none);
  }

  .arrow-right-dark-orange {
    position: relative;
    display: block;
    padding: 19px 15px 14px;

    @media (max-width: $screen-sm-max) {
      padding-top: 12px;
      padding-bottom: 10px;
    }

    &:after {
      position: absolute;
      top: 0;
      right: 13px;
      bottom: 0;
      width: 8px;
      height: 8px;
      margin-top: auto;
      margin-bottom: auto;
      border-top: 1px solid #6f5d45;
      border-right: 1px solid #6f5d45;
      transform: rotate(45deg);
      content: "";
    }
  }
}