1.button {
2  display: inline-block;
3  padding: 15px 30px;
4  background: linear-gradient(45deg, #00b5ff, #005eff);
5  color: #fff;
6  font-size: 18px;
7  font-weight: bold;
8  text-transform: uppercase;
9  border: none;
10  border-radius: 10px;
11  cursor: pointer;
12  position: relative;
13  overflow: hidden;
14  transition: box-shadow 0.3s, transform 0.3s;
15}
16
17.button::before {
18  content: "";
19  position: absolute;
20  top: 0;
21  left: 0;
22  width: 100%;
23  height: 100%;
24  background: rgba(255, 255, 255, 0.1);
25  transform: translateY(100%) rotateX(90deg);
26  transition: transform 0.3s ease-in-out;
27}
28
29.button:hover::before {
30  transform: translateY(0) rotateX(0);
31}
32
33.button::after {
34  content: "";
35  position: absolute;
36  top: -5px;
37  left: -5px;
38  width: calc(100% + 10px);
39  height: calc(100% + 10px);
40  border-radius: 15px;
41  border: 1px solid #00b5ff;
42  z-index: -1;
43}
44
45    /* Hover Effect */
46.button:hover {
47  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
48  transform: scale(1.05);
49}
50
51    /* Active Effect */
52.button:active {
53  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
54  transform: scale(0.95);
55}