1.button {
2  position: relative;
3  transition: all 0.3s ease-in-out;
4  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
5  padding-block: 0.5rem;
6  padding-inline: 1.25rem;
7  background-color: rgb(0 107 179);
8  border-radius: 9999px;
9  display: flex;
10  align-items: center;
11  justify-content: center;
12  color: #ffff;
13  gap: 10px;
14  font-weight: bold;
15  border: 3px solid #ffffff4d;
16  outline: none;
17  overflow: hidden;
18  font-size: 15px;
19}
20
21.icon {
22  width: 24px;
23  height: 24px;
24  transition: all 0.3s ease-in-out;
25}
26
27.button:hover {
28  transform: scale(1.05);
29  border-color: #fff9;
30}
31
32.button:hover .icon {
33  transform: translate(4px);
34}
35
36.button:hover::before {
37  animation: shine 1.5s ease-out infinite;
38}
39
40.button::before {
41  content: "";
42  position: absolute;
43  width: 100px;
44  height: 100%;
45  background-image: linear-gradient(
46    120deg,
47    rgba(255, 255, 255, 0) 30%,
48    rgba(255, 255, 255, 0.8),
49    rgba(255, 255, 255, 0) 70%
50  );
51  top: 0;
52  left: -100px;
53  opacity: 0.6;
54}
55
56@keyframes shine {
57  0% {
58    left: -100px;
59  }
60
61  60% {
62    left: 100%;
63  }
64
65  to {
66    left: 100%;
67  }
68}
69