Rotate clip-path from bottom right side to the bottom left side

Question

I have a button on css:

button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-90deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>

How I can start animation from bottom left side, but not right? I need when user hover on button, animation should start from left and go to from light bg to dark (light сolor should be on the whole button as it is now). Help please. Thanks.

Answer 1

You can do that by just using transfomr: rotateY(0.5turn); to rotate that 90deg and make that animation from right.

EDIT

change the angle of the background-gradient -270deg to move the dark side to right.

button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-270deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
  transform: rotateY(0.5turn);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>