Button by MuhammadHasann

1.button {
2  --black-700: hsla(0 0% 12% / 1);
3  --border_radius: 9999px;
4  --transtion: 0.3s ease-in-out;
5  --offset: 2px;
6
7  cursor: pointer;
8  position: relative;
9
10  display: flex;
11  align-items: center;
12  gap: 0.5rem;
13
14  transform-origin: center;
15
16  padding: 1rem 2rem;
17  background-color: transparent;
18
19  border: none;
20  border-radius: var(--border_radius);
21  transform: scale(calc(1 + (var(--active, 0) * 0.1)));
22
23  transition: transform var(--transtion);
24}
25
26.button::before {
27  content: "";
28  position: absolute;
29  top: 50%;
30  left: 50%;
31  transform: translate(-50%, -50%);
32
33  width: 100%;
34  height: 100%;
35  background-color: var(--black-700);
36
37  border-radius: var(--border_radius);
38  box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
39    0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
40    0 0 0 calc(var(--active, 0) * 0.375rem) hsl(260 97% 50% / 0.75);
41
42  transition: all var(--transtion);
43  z-index: 0;
44}
45
46.button::after {
47  content: "";
48  position: absolute;
49  top: 50%;
50  left: 50%;
51  transform: translate(-50%, -50%);
52
53  width: 100%;
54  height: 100%;
55  background-color: hsla(260 97% 61% / 0.75);
56  background-image: radial-gradient(
57      at 51% 89%,
58      hsla(266, 45%, 74%, 1) 0px,
59      transparent 50%
60    ),
61    radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0px, transparent 50%),
62    radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0px, transparent 50%);
63  background-position: top;
64
65  opacity: var(--active, 0);
66  border-radius: var(--border_radius);
67  transition: opacity var(--transtion);
68  z-index: 2;
69}
70
71.button:is(:hover, :focus-visible) {
72  --active: 1;
73}
74.button:active {
75  transform: scale(1);
76}
77
78.button .dots_border {
79  --size_border: calc(100% + 2px);
80
81  overflow: hidden;
82
83  position: absolute;
84  top: 50%;
85  left: 50%;
86  transform: translate(-50%, -50%);
87
88  width: var(--size_border);
89  height: var(--size_border);
90  background-color: transparent;
91
92  border-radius: var(--border_radius);
93  z-index: -10;
94}
95
96.button .dots_border::before {
97  content: "";
98  position: absolute;
99  top: 30%;
100  left: 50%;
101  transform: translate(-50%, -50%);
102  transform-origin: left;
103  transform: rotate(0deg);
104
105  width: 100%;
106  height: 2rem;
107  background-color: white;
108
109  mask: linear-gradient(transparent 0%, white 120%);
110  animation: rotate 2s linear infinite;
111}
112
113@keyframes rotate {
114  to {
115    transform: rotate(360deg);
116  }
117}
118
119.button .sparkle {
120  position: relative;
121  z-index: 10;
122
123  width: 1.75rem;
124}
125
126.button .sparkle .path {
127  fill: currentColor;
128  stroke: currentColor;
129
130  transform-origin: center;
131
132  color: hsl(0, 0%, 100%);
133}
134
135.button:is(:hover, :focus) .sparkle .path {
136  animation: path 1.5s linear 0.5s infinite;
137}
138
139.button .sparkle .path:nth-child(1) {
140  --scale_path_1: 1.2;
141}
142.button .sparkle .path:nth-child(2) {
143  --scale_path_2: 1.2;
144}
145.button .sparkle .path:nth-child(3) {
146  --scale_path_3: 1.2;
147}
148
149@keyframes path {
150  0%,
151  34%,
152  71%,
153  100% {
154    transform: scale(1);
155  }
156  17% {
157    transform: scale(var(--scale_path_1, 1));
158  }
159  49% {
160    transform: scale(var(--scale_path_2, 1));
161  }
162  83% {
163    transform: scale(var(--scale_path_3, 1));
164  }
165}
166
167.button .text_button {
168  position: relative;
169  z-index: 10;
170
171  background-image: linear-gradient(
172    90deg,
173    hsla(0 0% 100% / 1) 0%,
174    hsla(0 0% 100% / var(--active, 0)) 120%
175  );
176  background-clip: text;
177
178  font-size: 1rem;
179  color: transparent;
180}
181