Estoy trabajando en un proyecto usando next.js, es una tienda de comercio electrónico. Diseñé una animación de botón que funciona con el clic de un botón, cuando el estilo css está activo. Sin embargo, observo que el estilo css activo que se supone que ejecuta la animación solo funciona para el primer botón del producto. El resto del botón no hereda la animación de sus botones.

 .container{ display: flex; justify-content: center; align-items: center; } .but{ width: 270px; height: 80px; border: none; outline: none; background: #2f2f2f; color: #fff; font-size: 22px; border-radius: 40px; text-align: center; box-shadow: 0 6px 20px -5px rgba(0,0,0,0.4); position: relative; overflow: hidden; cursor: pointer; } .check-box{ width: 80px; height: 80px; border-radius: 40px; box-shadow: 0 0 12px -2px rgba(0,0,0,0.5); position: absolute; top: 0; right: -40px; opacity: 0; } .check-box svg{ width: 40px; margin: 20px; } .active .check-box{ right: 0; opacity: 1; transition: 1s; } .active p{ margin-right: 125px; transition: 1s; } .active svg path{ stroke-dashoffset: 0; transition: 1s; transition-delay: 1s; }

este es el estilo svg que guardé en el svg en el jsx

 style: 3, stroke: "white", strokeDasharray: 34, strokeDashoffset: 34, strokeLinecap: "round"

ahora aquí está el jsx que contiene el botón

 <div className="relative flex flex-col m-5 bg-white z-30 p-10"> <img src={image} height={400} width={400} objectFit="contain" className="cursor-pointer" /> <p className="my-3 pr-5 text-center ">{name}</p> <p className="mb-5 text-center ">{size}</p> <p className="mb-5 text-center "> ${price}</p> <div class="container"> <button className="but" id="btn"> <p id="btnText">Add to cart</p> <div class="check-box"> <svg style={{ style: 3, stroke: "white", strokeDasharray: 34, strokeDashoffset: 34, strokeLinecap: "round" }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <path fill="transparent" d="M14.1 27.2l7.1 7.2 16.7-16.8" /> </svg> </div> </button> </div> </div>