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

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