Button by gharsh11032000

1.button {
2  position: relative;
3  width: 120px;
4  height: 40px;
5  background-color: #000;
6  display: flex;
7  align-items: center;
8  color: white;
9  flex-direction: column;
10  justify-content: center;
11  border: none;
12  padding: 12px;
13  gap: 12px;
14  border-radius: 8px;
15  cursor: pointer;
16}
17
18.button::before {
19  content: '';
20  position: absolute;
21  inset: 0;
22  left: -4px;
23  top: -1px;
24  margin: auto;
25  width: 128px;
26  height: 48px;
27  border-radius: 10px;
28  background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
29  z-index: -10;
30  pointer-events: none;
31  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
32}
33
34.button::after {
35  content: "";
36  z-index: -1;
37  position: absolute;
38  inset: 0;
39  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
40  transform: translate3d(0, 0, 0) scale(0.95);
41  filter: blur(20px);
42}
43
44.button:hover::after {
45  filter: blur(30px);
46}
47
48.button:hover::before {
49  transform: rotate(-180deg);
50}
51
52.button:active::before {
53  scale: 0.7;
54}
55
56