Button by Yaya12085

1.button {
2  --color1: #e3a4fb;
3  --color2: #fca7a6;
4  --color3: #fe986d;
5  --white: rgba(255, 255, 255, 0.9);
6  --white2: rgba(255, 255, 255, 0.6);
7  --white3: rgba(255, 255, 255, 0.4);
8  --white4: rgba(255, 255, 255, 0.2);
9  --white5: rgba(255, 255, 255, 0.1);
10  cursor: pointer;
11  padding: 10px 20px;
12  height: 40px;
13  width: 150px;
14  border-radius: 10px;
15  outline: none;
16  position: relative;
17  box-sizing: border-box;
18  display: flex;
19  align-items: center;
20  justify-content: center;
21  gap: 1px;
22  border: none;
23  background: transparent;
24  background-color: transparent;
25  transition: all 235ms ease-in-out;
26}
27
28.button::before,
29.button::after {
30  position: absolute;
31  content: "";
32  width: 120%;
33  height: 150%;
34  border-radius: 16px;
35  background-color: var(--color1);
36  background: linear-gradient(
37    55deg,
38    var(--color1) 10%,
39    var(--color2) 40%,
40    var(--color3) 60%,
41    var(--color1) 80%
42  );
43  transition: all 235ms ease-in-out;
44}
45
46.button::before {
47  filter: blur(2px);
48  z-index: -1;
49  border: 2px solid rgba(255, 255, 255, 0.2);
50  background: radial-gradient(
51      circle at 20% 50%,
52      var(--white2) 8%,
53      transparent 0%
54    ),
55    radial-gradient(circle at 25% 50%, var(--white2) 8%, transparent 0%),
56    radial-gradient(ellipse at 5% 90%, var(--white4) 8%, transparent 0%),
57    radial-gradient(ellipse at 5% 50%, var(--white4) 8%, transparent 0%),
58    radial-gradient(circle at 15% 80%, var(--white3) 3%, transparent 0%),
59    radial-gradient(ellipse at 15% 10%, var(--white2) 14%, transparent 0%),
60    radial-gradient(ellipse at 15% 25%, var(--white3) 10%, transparent 0%),
61    radial-gradient(circle at 50% 50%, var(--white4) 12%, transparent 0%),
62    radial-gradient(circle at 45% 25%, var(--white4) 12%, transparent 0%),
63    radial-gradient(circle at 50% 75%, var(--white4) 12%, transparent 0%),
64    radial-gradient(circle at 70% 50%, var(--white4) 12%, transparent 0%),
65    radial-gradient(circle at 75% 25%, var(--white4) 12%, transparent 0%),
66    radial-gradient(circle at 70% 50%, var(--white2) 8%, transparent 0%),
67    radial-gradient(circle at 70% 75%, var(--white4) 12%, transparent 0%),
68    radial-gradient(circle at 80% 50%, var(--white4) 12%, transparent 0%),
69    radial-gradient(circle at 85% 25%, var(--white4) 12%, transparent 0%),
70    radial-gradient(circle at 98% 5%, var(--white2) 4%, transparent 0%),
71    radial-gradient(circle at 88% 25%, var(--white2) 8%, transparent 0%),
72    radial-gradient(ellipse at 90% 75%, var(--white2) 6%, transparent 0%),
73    radial-gradient(circle at 98% 55%, var(--white2) 8%, transparent 0%),
74    radial-gradient(circle at 98% 95%, var(--white2) 8%, transparent 0%);
75  background-repeat: no-repeat;
76}
77.button::after {
78  z-index: -2;
79  box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -18px;
80}
81.icon {
82  height: 30px;
83  width: 30px;
84}
85.title {
86  display: block;
87  font-weight: 600;
88}
89
90.border {
91  display: flex;
92  align-items: center;
93  justify-content: center;
94  position: absolute;
95  height: 100%;
96  width: 100%;
97  background: transparent;
98  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
99  border-radius: 10px;
100  transition: all 235ms ease-in-out;
101}
102.border::before,
103.border::after {
104  position: absolute;
105  content: "";
106  border-radius: 16px;
107  width: 120%;
108  height: 150%;
109}
110.border::before {
111  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
112  border-radius: 20px;
113  border: 2px solid transparent;
114  background: linear-gradient(
115      50deg,
116      rgba(0, 0, 0, 0.1) 1%,
117      var(--color1) 10%,
118      var(--color2) 40%,
119      var(--color3) 60%,
120      var(--color1) 80%,
121      rgba(0, 0, 0, 0.1) 100%
122    )
123    border-box;
124  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
125  -webkit-mask-composite: destination-out;
126  mask-composite: exclude;
127}
128
129.button:hover::after {
130  box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -24px;
131}
132.button:hover {
133  transform: translate3d(0, 2px, 0);
134}
135