.btn{display:inline-block;width:12rem;height:calc(var(--btn-size, 3rem) + var(--btn-padding, .15rem) * 2);padding:var(--btn-padding,.15rem);outline:none;border:none;font-size:.9rem;background:rgba(242,237,230,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}.btn,.btn .circle{position:relative;border-radius:4rem;transform:scale(0)}.btn .circle{display:block;margin:0;width:var(--btn-size,3rem);height:var(--btn-size,3rem);background:var(--accent);font-size:1.5rem;overflow:hidden;transition:width .5s cubic-bezier(.65,0,.076,1)}.btn .icon{top:calc(var(--btn-padding, .15rem) + (var(--btn-size, 3rem) / 2));left:calc(var(--btn-padding, .15rem) + (var(--btn-size, 3rem) / 2));color:var(--base-100);display:inline-flex;align-items:center;justify-content:center;width:calc(var(--btn-size, 3rem) * .5);height:calc(var(--btn-size, 3rem) * .5);font-size:calc(var(--btn-size, 3rem) * .5);will-change:transform}.btn .button-text,.btn .icon{position:absolute;line-height:1;transform:translate(-50%,-50%);transition:all .5s cubic-bezier(.65,0,.076,1)}.btn .button-text{top:50%;left:50%;margin:0 0 0 1.25rem;text-align:center;color:var(--base-500);font-family:Manrope,sans-serif;font-weight:600;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{transform:translate(calc(-50% + .75rem),-50%)}.btn:hover .button-text{color:var(--base-100)}