TyBs Patterns

Left Arrow 

<a href="#" class="btn btn-primary btn-animate-arrow arrow-left">Continue</a>
 
<a href="{{button_href}}" class="{{button_classes}}">{{button_text}}</a>
 
{
  "button_classes": "btn btn-primary btn-animate-arrow arrow-left",
  "button_text": "Continue",
  "button_href": "#"
}
  • Content: 
    // pattern styles
$button-timing:0.25s;
.btn {
  transition:transform $button-timing;
  &:hover {
    transform:scale(1.06);
  }
}
.btn.btn-animate-arrow {
  position:relative;
  transition:all $button-timing;
  &::after {
    display:inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    opacity:0;
    position:absolute;
    transform:scale(0.8);
    transition:transform $button-timing, opacity $button-timing, right $button-timing, left $button-timing, bottom $button-timing;
  }
  &:hover {
    &::after {
      opacity:1;
    }
  }
  &.arrow-left {
    &::after {
      content: "\f061";
      right:0.625rem;
    }
    &:hover {
      padding-right:0.75rem + 1.125rem; // default button padding is 0.75rem
    }
  }
  &.arrow-right {
    &::after {
      content: "\f060";
      left:0.625rem;
    }
    &:hover {
      margin-left:-1.125rem;
      padding-left:0.75rem + 1.125rem; // default button padding is 0.75rem
    }
  }
  &.arrow-down {
    &::after {
      bottom:-0.5rem;
      content: "\f063";
      left:50%;
      line-height:0.75;
      margin-left:-1rem;
      padding-bottom:0.75rem;
      text-align:center;
      width:2rem;
      z-index:-1;
    }
    &::before {
      background-color:inherit;
      bottom:0.28rem;
      border-radius:0 0 4px 0;
      clip-path:polygon(100% 99%, 100% 100%, 99% 100%);
      content:"";
      display:block;
      height:2rem;
      position:absolute;
      left:50%;
      margin-left:-1rem;
      transform:rotate(45deg);
      transition:bottom $button-timing, clip-path $button-timing;
      width:2rem;
      z-index:-1;
    }
    &:hover {
      &::after {
        bottom:-1.4rem;
        z-index:0;
      }
      &::before {
        bottom:-1rem;
        clip-path:polygon(100% 0%, 100% 100%, 0% 100%);
      }
    }
  }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: source/patterns/atoms/buttons/button/button.scss
  • Size: 1.8 KB

There are no notes for this item.