Button by adeladel522

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  cursor: pointer;
13  color: #ffff;
14  gap: 10px;
15  font-weight: bold;
16  border: 3px solid #ffffff4d;
17  outline: none;
18  overflow: hidden;
19  font-size: 15px;
20}
21
22.icon {
23  width: 24px;
24  height: 24px;
25  transition: all 0.3s ease-in-out;
26}
27
28.button:hover {
29  transform: scale(1.05);
30  border-color: #fff9;
31}
32
33.button:hover .icon {
34  transform: translate(4px);
35}
36
37.button:hover::before {
38  animation: shine 1.5s ease-out infinite;
39}
40
41.button::before {
42  content: "";
43  position: absolute;
44  width: 100px;
45  height: 100%;
46  background-image: linear-gradient(
47    120deg,
48    rgba(255, 255, 255, 0) 30%,
49    rgba(255, 255, 255, 0.8),
50    rgba(255, 255, 255, 0) 70%
51  );
52  top: 0;
53  left: -100px;
54  opacity: 0.6;
55}
56
57@keyframes shine {
58  0% {
59    left: -100px;
60  }
61
62  60% {
63    left: 100%;
64  }
65
66  to {
67    left: 100%;
68  }
69}
70