1<button class="morph-btn">
 2  <span class="btn-fill"></span>
 3  <span class="shadow"></span>
 4  <span class="btn-text">
 5    <span style="--i:0">L</span><span style="--i:1">a</span
 6    ><span style="--i:2">u</span><span style="--i:3">n</span
 7    ><span style="--i:4">c</span><span style="--i:5">h</span>
 8  </span>
 9  <span class="orbit-dots">
10    <span></span>
11    <span></span>
12    <span></span>
13    <span></span>
14  </span>
15  <span class="corners">
16    <span></span>
17    <span></span>
18    <span></span>
19    <span></span>
20  </span>
21</button>          

  1.morph-btn {
  2  position: relative;
  3  padding: 22px 56px;
  4  font-family: "Segoe UI", system-ui, sans-serif;
  5  font-size: 16px;
  6  font-weight: 700;
  7  letter-spacing: 3px;
  8  text-transform: uppercase;
  9  color: #ffffff;
 10  background: transparent;
 11  border: none;
 12  cursor: pointer;
 13  overflow: visible;
 14  isolation: isolate;
 15}
 16 
 17/* Main fill that morphs */
 18.morph-btn .btn-fill {
 19  position: absolute;
 20  inset: 0;
 21  background: #0d0d0d;
 22  border-radius: 4px;
 23  transition: border-radius 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 24  z-index: 1;
 25}
 26 
 27.morph-btn:hover .btn-fill {
 28  border-radius: 50px;
 29  animation: jelly 0.5s ease;
 30}
 31 
 32@keyframes jelly {
 33  0% {
 34    transform: scale(1, 1);
 35  }
 36  30% {
 37    transform: scale(1.15, 0.85);
 38  }
 39  50% {
 40    transform: scale(0.9, 1.1);
 41  }
 42  70% {
 43    transform: scale(1.05, 0.95);
 44  }
 45  100% {
 46    transform: scale(1, 1);
 47  }
 48}
 49 
 50/* Floating dots that orbit */
 51.morph-btn .orbit-dots {
 52  position: absolute;
 53  inset: -30px;
 54  pointer-events: none;
 55}
 56 
 57.morph-btn .orbit-dots span {
 58  position: absolute;
 59  width: 8px;
 60  height: 8px;
 61  background: #0d0d0d;
 62  border-radius: 50%;
 63  opacity: 1;
 64  transition: opacity 0.3s ease;
 65}
 66 
 67.morph-btn:hover .orbit-dots span {
 68  opacity: 1;
 69}
 70 
 71.morph-btn .orbit-dots span:nth-child(1) {
 72  top: 0;
 73  left: 50%;
 74  animation: orbit1 3s linear infinite;
 75}
 76 
 77.morph-btn .orbit-dots span:nth-child(2) {
 78  bottom: 0;
 79  left: 50%;
 80  animation: orbit2 3s linear infinite;
 81}
 82 
 83.morph-btn .orbit-dots span:nth-child(3) {
 84  top: 50%;
 85  left: 0;
 86  animation: orbit3 4s linear infinite;
 87}
 88 
 89.morph-btn .orbit-dots span:nth-child(4) {
 90  top: 50%;
 91  right: 0;
 92  animation: orbit4 4s linear infinite;
 93}
 94 
 95@keyframes orbit1 {
 96  0% {
 97    transform: translateX(-50%) translateY(0) scale(1);
 98  }
 99  25% {
100    transform: translateX(30px) translateY(10px) scale(0.6);
101  }
102  50% {
103    transform: translateX(-50%) translateY(20px) scale(1);
104  }
105  75% {
106    transform: translateX(-80px) translateY(10px) scale(0.6);
107  }
108  100% {
109    transform: translateX(-50%) translateY(0) scale(1);
110  }
111}
112 
113@keyframes orbit2 {
114  0% {
115    transform: translateX(-50%) translateY(0) scale(0.6);
116  }
117  25% {
118    transform: translateX(-80px) translateY(-10px) scale(1);
119  }
120  50% {
121    transform: translateX(-50%) translateY(-20px) scale(0.6);
122  }
123  75% {
124    transform: translateX(30px) translateY(-10px) scale(1);
125  }
126  100% {
127    transform: translateX(-50%) translateY(0) scale(0.6);
128  }
129}
130 
131@keyframes orbit3 {
132  0% {
133    transform: translateY(-50%) translateX(0) scale(0.8);
134  }
135  50% {
136    transform: translateY(-50%) translateX(-15px) scale(1.2);
137  }
138  100% {
139    transform: translateY(-50%) translateX(0) scale(0.8);
140  }
141}
142 
143@keyframes orbit4 {
144  0% {
145    transform: translateY(-50%) translateX(0) scale(1.2);
146  }
147  50% {
148    transform: translateY(-50%) translateX(15px) scale(0.8);
149  }
150  100% {
151    transform: translateY(-50%) translateX(0) scale(1.2);
152  }
153}
154 
155/* Text split animation */
156.morph-btn .btn-text {
157  position: relative;
158  display: inline-block;
159  z-index: 3;
160}
161 
162.morph-btn .btn-text span {
163  display: inline-block;
164  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
165  transition-delay: calc(var(--i) * 0.03s);
166}
167 
168.morph-btn:hover .btn-text span {
169  transform: translateY(-100%);
170  animation: letterBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
171  animation-delay: calc(var(--i) * 0.03s);
172}
173 
174@keyframes letterBounce {
175  0% {
176    transform: translateY(0);
177  }
178  40% {
179    transform: translateY(-120%);
180  }
181  70% {
182    transform: translateY(10%);
183  }
184  100% {
185    transform: translateY(0);
186  }
187}
188 
189/* Corner accents */
190.morph-btn .corners span {
191  position: absolute;
192  width: 20px;
193  height: 20px;
194  border: 2px solid #0d0d0d;
195  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
196  opacity: 1;
197}
198 
199.morph-btn .corners span:nth-child(1) {
200  top: -10px;
201  left: -10px;
202  border-right: none;
203  border-bottom: none;
204}
205 
206.morph-btn .corners span:nth-child(2) {
207  top: -10px;
208  right: -10px;
209  border-left: none;
210  border-bottom: none;
211}
212 
213.morph-btn .corners span:nth-child(3) {
214  bottom: -10px;
215  left: -10px;
216  border-right: none;
217  border-top: none;
218}
219 
220.morph-btn .corners span:nth-child(4) {
221  bottom: -10px;
222  right: -10px;
223  border-left: none;
224  border-top: none;
225}
226 
227.morph-btn:hover .corners span {
228  opacity: 1;
229}
230 
231.morph-btn:hover .corners span:nth-child(1) {
232  transform: translate(-5px, -5px) rotate(-5deg);
233}
234 
235.morph-btn:hover .corners span:nth-child(2) {
236  transform: translate(5px, -5px) rotate(5deg);
237}
238 
239.morph-btn:hover .corners span:nth-child(3) {
240  transform: translate(-5px, 5px) rotate(5deg);
241}
242 
243.morph-btn:hover .corners span:nth-child(4) {
244  transform: translate(5px, 5px) rotate(-5deg);
245}
246 
247/* Magnetic shadow */
248.morph-btn .shadow {
249  position: absolute;
250  inset: 5px;
251  background: rgba(13, 13, 13, 0.3);
252  border-radius: 4px;
253  filter: blur(15px);
254  z-index: 0;
255  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
256  transform: translateY(10px);
257}
258 
259.morph-btn:hover .shadow {
260  border-radius: 50px;
261  transform: translateY(15px) scale(1.1);
262  filter: blur(20px);
263}
264 
265/* Click effect */
266.morph-btn:active .btn-fill {
267  transform: scale(0.92);
268  transition: transform 0.1s ease;
269}
270 
271.morph-btn:active .shadow {
272  transform: translateY(3px) scale(0.85);
273  filter: blur(8px);
274  opacity: 0.5;
275  transition: all 0.1s ease;
276}
277 
278.morph-btn:active .btn-text {
279  transform: scale(0.95);
280  transition: transform 0.1s ease;
281}
282 
283.morph-btn:active .corners span:nth-child(1) {
284  transform: translate(-15px, -15px) rotate(-15deg) scale(0.8);
285}
286 
287.morph-btn:active .corners span:nth-child(2) {
288  transform: translate(15px, -15px) rotate(15deg) scale(0.8);
289}
290 
291.morph-btn:active .corners span:nth-child(3) {
292  transform: translate(-15px, 15px) rotate(15deg) scale(0.8);
293}
294 
295.morph-btn:active .corners span:nth-child(4) {
296  transform: translate(15px, 15px) rotate(-15deg) scale(0.8);
297}
298 
299.morph-btn:active .orbit-dots span {
300  animation-play-state: paused;
301  transform: scale(1.5);
302}