.btn-animated{z-index:1;position:relative;overflow:hidden}.btn-animated:before,.btn-animated:after{content:"";z-index:-1;background-color:#1010101a;width:100%;height:100%;transition:left .4s;position:absolute;top:0;left:-120%;transform:skew(25deg)}.btn-animated:hover:before{left:-10%}.btn-animated:hover:after{left:-20%}.btn-dynamic{background-color:var(--btn-bg);color:var(--btn-text);transition:background-color .2s,color .2s,border-color .2s}@media (hover:hover) and (pointer:fine){.btn-dynamic:hover{background-color:var(--btn-hover-bg);color:var(--btn-hover-text,var(--btn-text))}}.btn-dynamic:active{background-color:var(--btn-active-bg);color:var(--btn-active-text,var(--btn-text))}@media (hover:none){.btn-dynamic{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:none!important}.btn-animated:before,.btn-animated:after{display:none!important}}
@keyframes vibrate{0%{transform:translate(0)}25%{transform:translate(-2px)}50%{transform:translate(2px)}75%{transform:translate(-2px)}to{transform:translate(0)}}.vibrate:hover{animation:.4s linear vibrate}@keyframes pulse-scale{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.pulse:hover{animation:.6s ease-in-out pulse-scale}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-4px)}to{transform:translate(0)}}.shake:hover{animation:.4s linear shake}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.bounce:hover{animation:.5s ease-in-out bounce}@keyframes flip{0%{transform:rotateY(0)}50%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}.flip:hover{animation:.6s ease-in-out flip}