Harakat · primitive
Magnit tugma
Kursor yaqinlaşganda tugma unga biroz tortiladi (Aceternity Magnetic Button): tugmaning özi kuç uluşida, içidagi yozuv (.fx-magnet__label) yana biroz köproq siljiydi — qatlamli «tirik» his. Maydon tugma atrofida (data-range, px), kuç data-strength (0–1, standart 0,35), eng köp siljiş çegaralangan — tugma qoçib ketmaydi. Kursor ketsa, prujina bilan joyiga qaytadi. data-shape="orb" — landing uçun katta yumaloq CTA. Faqat siçqonçada; klaviatura, barmoq, harakat kamaytirilgan, calm va none rejimda tugma joyida.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-shape | auto tugma şakliorb katta doira CTA | auto |
Anatomiya
- root
[data-fx-magnet]şart - label
.fx-magnet__labelixtiyoriy
Holatlar
Klaviatura va kiriş
Faqat bezak: tugmaning nomi, roli, fokus halqasi va bosiliş maydoni özgarmaydi (siljiş translate bilan, kiçik). Fokus olganda siljiş tiklanadi. Barmoq va klaviaturada yöq. prefers-reduced-motion, data-fx-motion="calm" va "none"da öçiq.
Naqş: WAI-ARIA APG button
Kod
AI uçun: qaçon işlatiladi
- Landing hero yoki footer'dagi asosiy CTA.
- Portfolio sahifasidagi «Boğlaniş» doira tugmasi.
npx foxui add magnet
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-space-8);padding:var(--fx-space-8)"> <button type="button" class="fx-btn" data-variant="primary" data-size="lg" data-fx-magnet><span class="fx-magnet__label">Bepul boşlaş →</span></button> <a class="fx-btn" href="#" data-size="lg" data-fx-magnet data-strength="0.5"><span class="fx-magnet__label">Demo köriş</span></a> <button type="button" class="fx-btn" data-variant="primary" data-fx-magnet data-shape="orb" data-range="48"><span class="fx-magnet__label">Boğlaniş</span></button> </div>
Tokenlar: --fx-control-h-lg --fx-ease-bounce --fx-ease-standard --fx-font-size-md --fx-magnet-x --fx-magnet-y --fx-motion-fast --fx-motion-slower --fx-radius-circle