document.querySelector('button[id="But_wood"]').addEventListener('click', function() { this.classList.add("active"); setTimeout(()=>{ this.classList.remove("active"); },2000); });

 .Collect { background: #fff; border: 1px solid #000000; border-radius: 10px; width: 120px; height: 30px; color: #000000; display: inline; font: normal normal 16px/25px "alegreya", serif; text-align: center; } .Collect.active { background: lime; } .Collect.active::before { animation: 2s slidein linear; content: ""; position: absolute; height: 5px; width: 120px; background: #fa237d; border-radius: 5px; } @keyframes slidein { from { transform: scaleX(1); } to { transform: scaleX(0); } }

 <button class="Collect" id="But_wood">Pick wood</button>

Quiero tener una barra de progreso ejecutándose dentro de un botón cuando el usuario haga clic en él. A pesar de varios ajustes del CSS, ninguno de ellos funcionó y ninguna publicación similar me ha dado una respuesta tampoco...

A pesar de varios ajustes del CSS, ninguno de ellos funcionó y ninguna publicación similar me ha dado una respuesta tampoco...

Me gustaría que la barra de progreso esté dentro del botón, debajo del texto. En una nota al margen, no logré hacer que se ejecutara de izquierda a derecha, pero solo gasté en ambos lados al mismo tiempo, ¿cómo puedo cambiar eso también?

https://jsfiddle.net/dmv0obpu/57/

Gracias !

html:

 <button class="Collect" id="But_wood">Pick wood</button>

CSS:

 .Collect { background: #fff; border: 1px solid #000000; border-radius: 10px; width: 120px; height: 30px; color: #000000; display: inline; font: normal normal 16px/25px "alegreya", serif; text-align: center; } .Collect.active { background: lime; } .Collect.active::before { animation: 2s slidein linear; content: ""; position: absolute; height: 5px; width: 120px; background: #fa237d; border-radius: 5px; } @keyframes slidein { from { transform: scaleX(1); } to { transform: scaleX(0); } }

J.S.:

 document.querySelector('button[id="But_wood"]').addEventListener('click', function() { this.classList.add("active"); setTimeout(()=>{ this.classList.remove("active"); },2000); });