1 
 2<button class="botao">
 3  <svg
 4    class="mysvg"
 5    xmlns="http://www.w3.org/2000/svg"
 6    fill="none"
 7    viewBox="0 0 24 24"
 8    height="24px"
 9    width="24px"
10  >
11    <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
12    <g
13      stroke-linejoin="round"
14      stroke-linecap="round"
15      id="SVGRepo_tracerCarrier"
16    ></g>
17    <g id="SVGRepo_iconCarrier">
18      <g id="Interface / Download">
19        <path
20          stroke-linejoin="round"
21          stroke-linecap="round"
22          stroke-width="2"
23          stroke="#f1f1f1"
24          d="M6 21H18M12 3V17M12 17L17 12M12 17L7 12"
25          id="Vector"
26        ></path>
27      </g>
28    </g>
29  </svg>
30  <span class="texto">Download</span>
31</button>          

 1 
 2.botao {
 3  width: 125px;
 4  height: 45px;
 5  border-radius: 20px;
 6  border: none;
 7  box-shadow: 1px 1px rgba(107, 221, 215, 0.37);
 8  padding: 5px 10px;
 9  background-color: rgb(59, 190, 230);
10  color: #fff;
11  font-family: Roboto, sans-serif;
12  font-weight: 505;
13  font-size: 16px;
14  line-height: 1;
15  cursor: pointer;
16  filter: drop-shadow(0 0 10px rgba(59, 190, 230, 0.568));
17  transition: 0.5s linear;
18}
19 
20.botao .mysvg {
21  display: none;
22}
23 
24.botao:hover {
25  width: 50px;
26  height: 50px;
27  border-radius: 50%;
28  transition: 0.5s linear;
29}
30 
31.botao:hover .texto {
32  display: none;
33}
34 
35.botao:hover .mysvg {
36  display: inline;
37}
38 
39.botao:hover::after {
40  content: "";
41  position: absolute;
42  width: 16px;
43  height: 3px;
44  background-color: rgb(59, 190, 230);
45  margin-left: -20px;
46  animation: animate 0.9s linear infinite;
47}
48 
49.botao:hover::before {
50  content: "";
51  position: absolute;
52  top: -3px;
53  left: -3px;
54  width: 100%;
55  height: 100%;
56  border: 3.5px solid transparent;
57  border-top: 3.5px solid #fff;
58  border-right: 3.5px solid #fff;
59  border-radius: 50%;
60  animation: animateC 2s linear infinite;
61}
62 
63@keyframes animateC {
64  0% {
65    transform: rotate(0deg);
66  }
67 
68  100% {
69    transform: rotate(360deg);
70  }
71}
72 
73@keyframes animate {
74  0% {
75    transform: translateY(0);
76  }
77 
78  100% {
79    transform: translateY(20px);
80  }
81}