Component - Kodeset

Button

 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}

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.