.animated-button{background-color:inherit;--btn-color:hsl(var(--accent));color:var(--btn-color);box-shadow:0 0 0 2px var(--btn-color);cursor:pointer;border:4px solid #0000;border-radius:100px;align-items:center;gap:4px;padding:16px 36px;font-size:16px;font-weight:600;text-decoration:none;transition:all .6s cubic-bezier(.23,1,.32,1);display:flex;position:relative;overflow:hidden}.animated-button svg{width:24px;fill:var(--btn-color);z-index:9;transition:all .8s cubic-bezier(.23,1,.32,1);position:absolute}.animated-button .arr-1{right:16px}.animated-button .arr-2{left:-25%}.animated-button .circle{background-color:var(--btn-color);opacity:0;z-index:0;border-radius:50%;width:20px;height:20px;transition:all .8s cubic-bezier(.23,1,.32,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.animated-button .text{z-index:1;transition:all .8s cubic-bezier(.23,1,.32,1);position:relative;transform:translate(-12px)}.animated-button:hover{color:#000;border-radius:12px;box-shadow:0 0 0 12px #0000}.animated-button:hover .arr-1{right:-25%}.animated-button:hover .arr-2{left:16px}.animated-button:hover .text{transform:translate(12px)}.animated-button:hover svg{fill:#000}.animated-button:active{box-shadow:0 0 0 4px var(--btn-color);scale:.95}.animated-button:hover .circle{opacity:1;width:3000px;height:3000px}.variant-gold{--btn-color:hsl(var(--accent))}.variant-emerald{--btn-color:#10b981}.variant-danger{--btn-color:#b91c1c}