Upload Button

  <button class="upload-button">
  <div class="default">
    <div>Upload</div>
  </div>
  <div class="success">
    <svg viewBox="0 0 13 10">
      <path d="M1 5L4.66667 9L12 1" />
    </svg>
    <div>Done</div>
  </div>
  <div class="dots">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <svg viewBox="0 0 132 52">
    <path
      d="M2 11C2 7.13401 5.13401 4 9 4C12.866 4 39.7401 4 66 4C92.2599 4 119.134 4 123 4C126.866 4 130 7.13401 130 11V41C130 44.866 126.866 48 123 48C119.134 48 92.2599 48 66 48C39.7401 48 12.866 48 9 48C5.13401 48 2 44.866 2 41V11Z"
    />
  </svg>
</button>

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"  ></script> 
<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>

.upload-button {
	font-family: "Poppins", Arial;
	font-size: 16px;
	font-weight: 600;
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
	color: #fff;
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	width: 128px;
	padding: 0;
	margin: 0;
	text-align: center;
	line-height: 20px;
	position: relative;
	filter: drop-shadow(0px 4px 12px rgba(118, 70, 215, 0.1));
	transform: translateZ(0);
  }
  .upload-button > svg {
	display: block;
	width: 132px;
	height: 52px;
	fill: #7646d7;
	pointer-events: none;
	margin: -4px -2px;
	transition: fill 0.2s, transform 0.1s;
	transform: translateZ(0);
  }
  .upload-button:hover > svg {
	fill: #6f3bda;
  }
  .upload-button:active > svg {
	transform: scale(0.975) translateZ(0);
  }
  .upload-button .default,
  .upload-button .success {
	top: 12px;
	bottom: 12px;
	left: 0;
	right: 0;
	position: absolute;
	display: block;
	z-index: 1;
  }
  .upload-button .default > div,
  .upload-button .success > div {
	display: inline-block;
	vertical-align: top;
  }
  .upload-button .default > div > div span,
  .upload-button .success > div > div span {
	display: inline-block;
	vertical-align: top;
	transform-origin: 50% 100%;
	transform: translateZ(0);
  }
  .upload-button .success svg {
	width: 13px;
	height: 10px;
	fill: none;
	stroke: currentColor;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-width: 2;
	display: inline-block;
	vertical-align: top;
	margin: 5px 4px 5px 0;
	stroke-dasharray: 17px;
	stroke-dashoffset: 17px;
	transform: translateZ(0);
  }
  .upload-button .success > div > div span {
	opacity: 0;
	transform: scale(0.25) translateZ(0);
  }
  .upload-button .dots {
	top: 19px;
	bottom: 19px;
	left: 0;
	right: 0;
	position: absolute;
	display: flex;
	justify-content: center;
	z-index: 1;
  }
  .upload-button .dots span {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
	margin: 0 3px;
	transform: translateY(6px) scale(0);
  }
  
  html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
  }
  
  * {
	box-sizing: inherit;
  }
  *:before, *:after {
	box-sizing: inherit;
  }
  
  body {
	min-height: 100vh;
	display: flex;
	font-family: "Poppins", Arial;
	justify-content: center;
	align-items: center;
	background-color: #fdf9f7;
  }
  body .twitter {
	position: fixed;
	display: block;
	right: 12px;
	bottom: 12px;
  }
  body .twitter svg {
	width: 32px;
	height: 32px;
	fill: #1da1f2;
  }

const { to, set } = gsap;

gsap.registerPlugin(MorphSVGPlugin);

document.querySelectorAll(".upload-button").forEach((button) => {
  const path = button.querySelector(":scope > svg path");
  const dots = button.querySelectorAll(".dots span");

  button
    .querySelectorAll(".default > div, .success > div")
    .forEach(
      (state) =>
        (state.innerHTML =
          "<div><span>" +
          state.textContent.trim().split("").join("</span><span>") +
          "</span></div>")
    );

  const defaultLetters = button.querySelectorAll(".default span");
  const successLetters = button.querySelectorAll(".success span");
  const successTick = button.querySelector(".success svg");

  const reset = () => {
    to(successTick, {
      strokeDashoffset: "17px",
      duration: 0.15,
    });
    to(successLetters, {
      stagger: 0.075,
      scale: 0.25,
      opacity: 0,
      duration: 0.15,
      onComplete: () => {
        to(defaultLetters, {
          stagger: 0.075,
          scale: 1,
          opacity: 1,
          duration: 0.15,
          onComplete: () => (button.active = false),
        });
      },
    });
  };

  button.addEventListener("click", () => {
    if (button.active) {
      return;
    }

    button.active = true;

    to([...defaultLetters].reverse(), {
      stagger: 0.075,
      keyframes: [
        {
          scale: 1.075,
          duration: 0.15,
        },
        {
          scale: 0.2,
          opacity: 0,
          duration: 0.2,
        },
      ],
      onComplete: () => {
        to(dots, {
          stagger: 0.075,
          keyframes: [
            {
              y: -5,
              scale: 1,
              duration: 0.25,
            },
            {
              y: 5,
              duration: 0.25,
            },
            {
              y: -5,
              duration: 0.25,
            },
            {
              y: 5,
              duration: 0.25,
            },
            {
              y: -5,
              duration: 0.25,
            },
            {
              y: 5,
              scale: 0,
              duration: 0.25,
            },
          ],
        });

        to(path, {
          keyframes: [
            {
              duration: 0.25,
              morphSVG:
                "M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z",
            },
            {
              duration: 0.25,
              morphSVG:
                "M2 11C2 7.13405 5.13401 3.00004 9 4.00004C12.866 5.00004 39.7401 10 66 4.00004C92.2599 -1.99996 119.134 3.00004 123 4.00004C126.866 5.00004 130 7.13405 130 11V41C130 44.866 126.866 49 123 48C119.134 47 92.2599 42 66 48C39.7401 54 12.866 49 9 48C5.13401 47 2 44.866 2 41V11Z",
            },
            {
              duration: 0.25,
              morphSVG:
                "M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z",
            },
            {
              duration: 0.25,
              morphSVG:
                "M2 11C2 7.13405 5.13401 3.00004 9 4.00004C12.866 5.00004 39.7401 10 66 4.00004C92.2599 -1.99996 119.134 3.00004 123 4.00004C126.866 5.00004 130 7.13405 130 11V41C130 44.866 126.866 49 123 48C119.134 47 92.2599 42 66 48C39.7401 54 12.866 49 9 48C5.13401 47 2 44.866 2 41V11Z",
            },
            {
              duration: 0.25,
              morphSVG:
                "M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z",
            },
            {
              duration: 0.25,
              morphSVG:
                "M2 11C2 7.13401 5.13401 4 9 4C12.866 4 39.7401 4 66 4C92.2599 4 119.134 4 123 4C126.866 4 130 7.13401 130 11V41C130 44.866 126.866 48 123 48C119.134 48 92.2599 48 66 48C39.7401 48 12.866 48 9 48C5.13401 48 2 44.866 2 41V11Z",
            },
          ],
          onComplete: () => {
            to(successTick, {
              strokeDashoffset: "0px",
              duration: 0.2,
              onComplete: () => {
                to(successLetters, {
                  stagger: 0.075,
                  keyframes: [
                    {
                      scale: 1.1,
                      opacity: 1,
                      duration: 0.15,
                    },
                    {
                      scale: 1,
                      duration: 0.15,
                    },
                  ],
                  onComplete: () => {
                    to(button, {
                      keyframes: [
                        {
                          scale: 1.05,
                          duration: 0.15,
                        },
                        {
                          scale: 1,
                          duration: 0.1,
                          clearProps: true,
                        },
                      ],
                      onComplete: () => {
                        setTimeout(reset, 2000);
                      },
                    });
                  },
                });
              },
            });
          },
        });
      },
    });
  });
});