Magnetic button
Leans toward the pointer and squishes when pressed. The label moves less than the button.
Bring your pointer close, then clickEdit
.magnet-scene {
display: grid;
place-items: center;
height: 100%;
}
.magnet {
--k-magnetic: 0.35;
--k-radius: 160px;
--k-when: press;
--k-scale: 0.94;
--k-motion: bouncy;
padding: 18px 34px;
border: 0;
border-radius: 999px;
background: #0c1324;
color: #fff;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.magnet span {
--k-magnetic: 0.15;
--k-radius: 160px;
display: inline-block;
}