.mask-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:18px 32px;cursor:pointer;border:1px;border-radius:100px;overflow:hidden}.mask-btn:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;z-index:0;border-radius:100px;opacity:1;transition:opacity .3s ease}.mask-btn:not(:hover):after{opacity:0}.mask-btn:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#185196;border-radius:100px;-webkit-mask-image:url(https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png);mask-image:url(https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png);-webkit-mask-size:3000% 100%;mask-size:3000% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:destination-out;mask-composite:subtract;animation:ani2 .7s steps(29) forwards;z-index:1;pointer-events:none}.mask-btn:hover:before{animation:ani .7s steps(29) forwards}.btn-text{position:relative;z-index:2;font-family:Lato,sans-serif;font-weight:700;font-size:16px;letter-spacing:1px;display:inline-flex;align-items:center;gap:.5rem;border:#000;color:#fff;pointer-events:none;transition:color .3s ease;background:rgba(0,0,0,.01)}.mask-btn:hover .btn-text{color:#000!important}@keyframes ani{0%{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:100% 0;mask-position:100% 0}}@keyframes ani2{0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}