.btn{position:relative;display:inline-block;width:12rem;height:auto;padding:.15rem;outline:none;border:none;font-size:.9rem;background:rgba(242,237,230,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:4rem;cursor:pointer;margin:1rem 0;transform:scale(0)}.btn .circle{position:relative;margin:0;width:3rem;height:3rem;background:var(--base-450);border-radius:4rem;transform:scale(0);overflow:hidden;transition:width .5s cubic-bezier(.65,0,.076,1)}.btn .circle,.btn .icon{display:flex;align-items:center;justify-content:center;font-size:1.5rem}.btn .icon{top:calc(.15rem + 1.5rem);left:calc(.15rem + 1.5rem);transform:translate(-50%,-50%);color:var(--base-100);will-change:transform}.btn .button-text,.btn .icon{position:absolute;transition:all .5s cubic-bezier(.65,0,.076,1)}.btn .button-text{top:50%;left:3.35rem;right:.5rem;transform:translateY(-50%);text-align:center;color:var(--base-500);font-family:Manrope,sans-serif;font-weight:600;line-height:1;white-space:nowrap}.btn .line{position:relative;transform:translateY(100%);will-change:transform;padding-bottom:.2em;margin-bottom:-.2em}.btn:hover .circle{width:100%}.btn:hover .icon{left:calc(.15rem + 1.5rem + .75rem)}.btn:hover .button-text{color:var(--base-100)}@media (max-width:480px){.btn{width:11rem;font-size:.8rem}.btn .circle{width:2.5rem;height:2.5rem}.btn .icon{top:calc(.15rem + 1.25rem);left:calc(.15rem + 1.25rem);font-size:1.25rem}.btn .button-text{font-size:.85rem;left:2.8rem;right:.5rem}}@media (max-width:380px){.btn{width:10rem}.btn .circle{width:2.25rem;height:2.25rem}.btn .icon{top:calc(.15rem + 1.125rem);left:calc(.15rem + 1.125rem);font-size:1.1rem}.btn .button-text{font-size:.8rem;left:2.5rem;right:.4rem}}