1.Btn {
2  width: 145px;
3  height: 45px;
4  background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);
5  border: none;
6  display: flex;
7  align-items: center;
8  justify-content: center;
9  cursor: pointer;
10  box-shadow: 5px 5px 0px #4dc6d93d;
11  background-size: 400% 400%;
12}
13
14.svgContainer {
15  width: 45px;
16  height: 100%;
17  background-color: rgba(255, 255, 255, 0.2);
18  display: flex;
19  align-items: center;
20  justify-content: center;
21}
22
23.svgContainer svg {
24  width: 16px;
25}
26
27.svgContainer svg path {
28  fill: white;
29}
30
31.textContainer {
32  width: 100px;
33  height: 100%;
34  display: flex;
35  align-items: center;
36  justify-content: center;
37  color: white;
38  font-weight: 600;
39}
40
41.Btn:hover {
42  animation: gradient 5s ease infinite;
43}
44/* Button's gradient animation */
45@keyframes gradient {
46  0% {
47    background-position: 0 50%;
48  }
49
50  50% {
51    background-position: 100% 50%;
52  }
53
54  100% {
55    background-position: 0 50%;
56  }
57}