.btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;background:#fff;border:none;border-radius:4rem;outline:none;width:min(100%,clamp(12rem,28vw,14rem));height:auto;margin:1rem 0;padding:.15rem;font-size:.9rem;display:inline-block;position:relative;transform:scale(0)}.btn .circle{background:#000;border-radius:4rem;width:3rem;height:3rem;margin:0;font-size:1.5rem;transition:width .5s cubic-bezier(.65,0,.076,1);display:block;position:relative;overflow:hidden;transform:scale(0)}.btn .icon{color:var(--base-100);will-change:transform;font-size:1.5rem;transition:all .5s cubic-bezier(.65,0,.076,1);position:absolute;top:.775rem;left:.95rem;transform:translate(0)}.btn .button-text{text-align:center;width:100%;height:100%;color:var(--base-500);font-family:var(--font-primary);white-space:nowrap;justify-content:center;align-items:center;margin:0;padding-left:1.5rem;font-weight:500;line-height:3rem;transition:all .5s cubic-bezier(.65,0,.076,1);display:flex;position:absolute;top:0;left:0}.btn .line{will-change:transform;margin-bottom:0;padding-bottom:0;position:relative}.btn:hover .circle{width:100%}.btn:hover .icon{transform:translate(.75rem)}.btn:hover .button-text{color:var(--base-100)}@media (hover:none){.btn:hover .circle{width:3rem}.btn:hover .icon{transform:translate(0)}.btn:hover .button-text{color:var(--base-500)}}