1<button class="button">
 2  <svg xmlns="http://www.w3.org/2000/svg">
 3    <rect class="border" pathLength="100"></rect>
 4    <rect class="loading" pathLength="100"></rect>
 5 
 6    <svg
 7      class="done-svg"
 8      xmlns="http://www.w3.org/2000/svg"
 9      viewBox="0 0 24 24"
10    >
11      <path
12        class="done done-cloud"
13        pathLength="100"
14        d="M 6.5,20 Q 4.22,20 2.61,18.43 1,16.85 1,14.58 1,12.63 2.17,11.1 3.35,9.57 5.25,9.15 5.88,6.85 7.75,5.43 9.63,4 12,4 14.93,4 16.96,6.04 19,8.07 19,11 q 1.73,0.2 2.86,1.5 1.14,1.28 1.14,3 0,1.88 -1.31,3.19 Q 20.38,20 18.5,20 Z"
15      ></path>
16      <path
17        class="done done-check"
18        pathLength="100"
19        d="M 7.515,12.74 10.34143,15.563569 15.275,10.625"
20      ></path>
21    </svg>
22  </svg>
23  <div class="txt-upload">Upload</div>
24</button>      

  1.button {
  2  position: relative;
  3  width: 10rem;
  4  height: 3rem;
  5  cursor: pointer;
  6  border: none;
  7  background: none;
  8}
  9 
 10.button svg {
 11  width: 100%;
 12  height: 100%;
 13  overflow: visible;
 14}
 15 
 16.border {
 17  width: 100%;
 18  height: 100%;
 19  stroke: black;
 20  stroke-width: 2px;
 21  fill: #0000;
 22  rx: 1em;
 23  ry: 1em;
 24  stroke-dasharray: 25;
 25  transition: fill 0.25s;
 26  animation: 4s linear infinite stroke-animation;
 27}
 28 
 29.button:hover .border {
 30  fill: #0001;
 31}
 32 
 33.button:focus .border {
 34  transition: fill 0.25s 7.75s;
 35  fill: #0000;
 36}
 37 
 38@keyframes stroke-animation {
 39  0% {
 40    stroke-dashoffset: 100;
 41  }
 42  to {
 43    stroke-dashoffset: 0;
 44  }
 45}
 46 
 47.txt-upload {
 48  position: absolute;
 49  inset: 0;
 50  display: flex;
 51  align-items: center;
 52  justify-content: center;
 53}
 54 
 55.txt-upload::after {
 56  content: "";
 57}
 58 
 59.button:focus .rect {
 60  stroke-dasharray: 50;
 61}
 62.button:focus .border {
 63  stroke: #0000;
 64}
 65 
 66.button:focus .txt-upload {
 67  opacity: 0;
 68  transition: opacity 0.25s 8s;
 69}
 70 
 71.button:focus .txt-upload::after {
 72  animation: 0.66666s anim step-end forwards,
 73    1.33333s 0.6666s anim2 linear infinite alternate;
 74}
 75 
 76@keyframes anim {
 77  0% {
 78    content: "i";
 79  }
 80  50% {
 81    content: "in";
 82  }
 83  to {
 84    content: "ing";
 85  }
 86}
 87 
 88@keyframes anim2 {
 89  0% {
 90    content: "ing";
 91  }
 92  33% {
 93    content: "ing.";
 94  }
 95  66% {
 96    content: "ing..";
 97  }
 98  to {
 99    content: "ing...";
100  }
101}
102 
103.loading {
104  width: 100%;
105  height: 100%;
106  stroke: #0055d4;
107  stroke-width: 2px;
108  fill: none;
109  rx: 1em;
110  ry: 1em;
111  stroke-dasharray: 0 100;
112}
113 
114.button:focus .loading {
115  transition: stroke 0.5s 7.5s, stroke-dasharray 8s 0.5s ease-out;
116  stroke: #08ca08;
117  stroke-dasharray: 100 0;
118}
119 
120.done {
121  fill: none;
122  stroke: #000;
123  stroke-dasharray: 0 100;
124}
125 
126.button:focus .done-cloud {
127  transition: stroke-dasharray 0.75s 8.5s ease-out;
128  stroke-dasharray: 100 0;
129}
130 
131.button:focus .done-check {
132  transition: stroke-dasharray 0.5s 9.2s ease-out;
133  stroke: #08ca08;
134  stroke-dasharray: 100 0;
135}