// 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%); } } } }