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>

I want to have a progress bar running inside a button when the user clic on it. Despite several tweaking of the CSS, none of them made it work and no similar post has given me an answer either...

Despite several tweaking of the CSS, none of them made it work and no similar post has given me an answer either...

I would like for the progress bar to be inside the button, under the text. On a side note, I didn't manage to make it run from left to right, but only expending on both side at the same time, how can I change that too ?

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

Thank you !

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);
  }
}

JS :

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