1 
 2<button class="button">
 3  <svg xmlns="http://www.w3.org/2000/svg">
 4    <rect class="border" pathLength="100"></rect>
 5    <rect class="loading" pathLength="100"></rect>
 6 
 7    <svg
 8      class="done-svg"
 9      xmlns="http://www.w3.org/2000/svg"
10      viewBox="0 0 24 24"
11    >
12      <path
13        class="done done-cloud"
14        pathLength="100"
15        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"
16      ></path>
17      <path
18        class="done done-check"
19        pathLength="100"
20        d="M 7.515,12.74 10.34143,15.563569 15.275,10.625"
21      ></path>
22    </svg>
23  </svg>
24  <div class="txt-upload">Upload</div>
25</button>          

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