1 
 2<button>
 3  <div class="svg-wrapper-1">
 4    <div class="svg-wrapper">
 5      <svg
 6        xmlns="http://www.w3.org/2000/svg"
 7        viewBox="0 0 24 24"
 8        width="24"
 9        height="24"
10      >
11        <path fill="none" d="M0 0h24v24H0z"></path>
12        <path
13          fill="currentColor"
14          d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
15        ></path>
16      </svg>
17    </div>
18  </div>
19  <span>Send</span>
20</button>          

 1 
 2button {
 3  font-family: inherit;
 4  font-size: 20px;
 5  background: royalblue;
 6  color: white;
 7  padding: 0.7em 1em;
 8  padding-left: 0.9em;
 9  display: flex;
10  align-items: center;
11  border: none;
12  border-radius: 16px;
13  overflow: hidden;
14  transition: all 0.2s;
15  cursor: pointer;
16}
17 
18button span {
19  display: block;
20  margin-left: 0.3em;
21  transition: all 0.3s ease-in-out;
22}
23 
24button svg {
25  display: block;
26  transform-origin: center center;
27  transition: transform 0.3s ease-in-out;
28}
29 
30button:hover .svg-wrapper {
31  animation: fly-1 0.6s ease-in-out infinite alternate;
32}
33 
34button:hover svg {
35  transform: translateX(1.2em) rotate(45deg) scale(1.1);
36}
37 
38button:hover span {
39  transform: translateX(5em);
40}
41 
42button:active {
43  transform: scale(0.95);
44}
45 
46@keyframes fly-1 {
47  from {
48    transform: translateY(0.1em);
49  }
50 
51  to {
52    transform: translateY(-0.1em);
53  }
54}