Button by MuhammadHasann

1:root {
2  --primary: rgb(122, 48, 143);
3  --light: rgb(199, 95, 228);
4  --text-color: rgb(184, 132, 199);
5}
6
7.button {
8  overflow: hidden;
9  cursor: pointer;
10  position: relative;
11  padding: 0.5rem 1.5rem;
12  width: fit-content;
13  height: fit-content;
14  background-color: rgb(122, 48, 143);
15  font-size: 0.75rem;
16  color: white;
17  border: none;
18  border-radius: 0.5rem;
19  box-shadow: 0px 0px 2px 1px rgb(122, 48, 143);
20  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
21}
22
23.button .text-button {
24  position: relative;
25  z-index: 10;
26}
27
28.button::before,
29.button::after {
30  content: "";
31  position: absolute;
32  top: 0;
33  width: 100%;
34  height: 100%;
35  transition: all 0.3s ease-in-out;
36}
37.button::before {
38  left: 0;
39  background-image: radial-gradient(
40    circle at 0% 45%,
41    rgba(16, 5, 36, 1) 19%,
42    rgba(16, 5, 36, 0.26) 46%,
43    rgba(16, 5, 36, 0) 100%
44  );
45}
46.button::after {
47  right: 0;
48  background-image: radial-gradient(
49    circle at 100% 45%,
50    rgba(16, 5, 36, 1) 19%,
51    rgba(16, 5, 36, 0.26) 46%,
52    rgba(16, 5, 36, 0) 100%
53  );
54}
55
56.button:hover {
57  box-shadow: 0px 0px 20px 0 rgb(122, 48, 143);
58}
59
60.button:hover::before,
61.button:hover::after {
62  width: 0;
63  opacity: 0;
64}
65