Button by Deri-Kurniawan

1.button {
2  position: relative;
3  padding: 12px 32px;
4  font-size: 16px;
5  font-weight: 700;
6  text-transform: uppercase;
7  color: #000;
8  background-color: #fff;
9  border: none;
10  border-radius: 50px;
11  overflow: hidden;
12  z-index: 1;
13  transition: all 0.3s ease-in-out;
14  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
15  cursor: pointer;
16}
17
18.button:hover {
19  transform: scale(1.05);
20  color: #fff;
21  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
22}
23
24.button:active {
25  transform: scale(0.9);
26}
27
28.button::before {
29  content: "";
30  position: absolute;
31  top: 0;
32  left: -100%;
33  width: 100%;
34  height: 100%;
35  background: linear-gradient(to right, #007bff, #00bfff);
36  transition: all 0.4s ease-in-out;
37  z-index: -1;
38  border-radius: 50px;
39}
40
41.button:hover::before {
42  left: 0;
43}