Button by KhaledMatalkah

1.button {
2  display: inline-block;
3  padding: 12px 24px;
4  font-size: 16px;
5  font-weight: bold;
6  text-transform: uppercase;
7  color: #fff;
8  background-color: #ff4081;
9  border: none;
10  border-radius: 50px;
11  transition: background-color 0.3s ease, transform 0.2s ease;
12  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
13  cursor: pointer;
14  position: relative;
15  overflow: hidden;
16  z-index: 1;
17}
18
19.button::before {
20  content: "";
21  position: absolute;
22  top: -50%;
23  left: -50%;
24  width: 200%;
25  height: 200%;
26  background-color: rgba(255, 64, 129, 0.6);
27  border-radius: 50%;
28  transform: translate(-50%, -50%);
29  transition: all 0.4s ease;
30  z-index: -1;
31}
32
33.button::after {
34  content: "";
35  position: absolute;
36  top: 0;
37  left: 0;
38  width: 100%;
39  height: 100%;
40  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
41  background-size: 30px 30px;
42  opacity: 0;
43  transition: opacity 0.4s ease;
44}
45
46.button:hover {
47  background-color: #e91e63;
48  transform: scale(1.1) rotate(5deg);
49  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
50}
51
52.button:hover::before {
53  top: 50%;
54  left: 50%;
55  width: 100%;
56  height: 100%;
57  transform: translate(-50%, -50%) rotate(45deg);
58}
59
60.button:hover::after {
61  opacity: 1;
62}
63
64.button:active {
65  background-color: #e91e63;
66  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
67  transform: translateY(2px);
68}
69