Card by MuhammadHasann

1.card {
2  overflow: hidden;
3  position: relative;
4  display: flex;
5  flex-direction: column;
6  gap: 0.75rem;
7  padding: 1rem;
8  width: 14rem;
9  height: auto;
10  background-color: rgb(122, 48, 143);
11  background-image: radial-gradient(
12      circle at 0% 0%,
13      rgb(37, 7, 44) 15%,
14      rgba(0, 0, 0, 0) 75%
15    ),
16    radial-gradient(
17      circle at 100% 100%,
18      rgb(25, 2, 31, 0.9) 15%,
19      rgba(0, 0, 0, 0) 150%
20    ),
21    linear-gradient(
22      135deg,
23      rgba(24, 8, 28, 0) 0%,
24      rgb(122, 48, 143) 50%,
25      rgba(24, 8, 28, 0) 100%
26    );
27  border-radius: 0.5rem;
28}
29
30.card::before {
31  content: "";
32  position: absolute;
33  top: 1rem;
34  right: 1rem;
35  width: 2rem;
36  height: 2rem;
37  background-color: rgb(122, 48, 143);
38  background-image: linear-gradient(
39    0deg,
40    rgba(118, 42, 180, 1) 0%,
41    rgb(199, 95, 228) 75%
42  );
43  border-radius: 9999px;
44  box-shadow: 0 1px 5px 3px rgb(199, 95, 228), 0 0 30px 5px rgb(199, 95, 228);
45}
46
47.card .title {
48  font-size: 1rem;
49  color: white;
50  font-weight: 600;
51}
52
53.card .pricing {
54  font-size: 1.5rem;
55  color: white;
56  font-weight: 600;
57}
58
59.card .pricing .pricing-time,
60.card .sub-title {
61  font-size: 0.75rem;
62  color: rgb(184, 132, 199);
63  font-weight: 500;
64}
65
66.card .list {
67  display: flex;
68  flex-direction: column;
69  gap: 0.25rem;
70  font-size: 0.75rem;
71  color: white;
72  font-weight: 500;
73  list-style: none;
74}
75
76.card .list .list-item .check {
77  margin-right: 0.25rem;
78  font-size: 1rem;
79  color: rgb(199, 95, 228);
80  font-weight: 900;
81}
82
83.card .button {
84  overflow: hidden;
85  cursor: pointer;
86  position: relative;
87  margin-top: 0.5rem;
88  padding: 0.5rem 0.75rem;
89  width: 100%;
90  height: fit-content;
91  background-color: rgb(122, 48, 143);
92  font-size: 0.75rem;
93  color: white;
94  border: none;
95  border-radius: 0.5rem;
96  box-shadow: 0px 0px 2px 1px rgb(122, 48, 143);
97  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
98}
99
100.card .button .text-button {
101  position: relative;
102  z-index: 10;
103}
104
105.card .button::before,
106.card .button::after {
107  content: "";
108  position: absolute;
109  top: 0;
110  width: 100%;
111  height: 100%;
112  transition: all 0.3s ease-in-out;
113}
114.card .button::before {
115  left: 0;
116  background-image: radial-gradient(
117    circle at 0% 45%,
118    rgba(16, 5, 36, 1) 19%,
119    rgba(16, 5, 36, 0.26) 46%,
120    rgba(16, 5, 36, 0) 100%
121  );
122}
123.card .button::after {
124  right: 0;
125  background-image: radial-gradient(
126    circle at 100% 45%,
127    rgba(16, 5, 36, 1) 19%,
128    rgba(16, 5, 36, 0.26) 46%,
129    rgba(16, 5, 36, 0) 100%
130  );
131}
132
133.card .button:hover {
134  box-shadow: 0px 0px 20px 0 rgb(122, 48, 143);
135}
136
137.card .button:hover::before,
138.card .button:hover::after {
139  width: 0;
140  opacity: 0;
141}
142