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