SquadKode Bits
39.9KCreate
HTML/CSS

Magnetic CTA Button

PreviewCode
Live preview#magnet

HTML/CSS

Create +

Install

Use this as a template path now; later it can map to a real registry package.

shadcn
pnpm dlx shadcn@latest add @squadkode/ui-lab/magnetic-cta-button

Usage (with your settings)

A compact React example generated from this template data.

import "./magnetic-cta-button.css"; export function MagneticCTAButton() {  return (    <button className="sk-glow-button">      Start project <span aria-hidden="true">-&gt;</span>    </button>  );}

Code

Switch between HTML, CSS, TSX, and Astro versions.

HTMLStatic markup for previews and no-build pages.CSSThemeable styling with compact component scope.TSXReact-ready component with imported CSS.AstroDrop-in Astro component with local styles.
<button class="sk-glow-button">  Start project  <span aria-hidden="true">-></span></button>
.sk-glow-button {  display: inline-flex;  align-items: center;  gap: .65rem;  min-height: 44px;  border: 1px solid rgba(213,171,255,.32);  border-radius: 999px;  padding: 0 1.1rem;  color: #fff;  background: linear-gradient(135deg, #7c3aed, #ff66c4);  font: 700 .92rem/1 Inter, system-ui, sans-serif;} .sk-glow-button span {  transition: transform .2s ease;} .sk-glow-button:hover span {  transform: translateX(3px);}
import "./magnetic-cta-button.css"; export function MagneticCTAButton() {  return (    <button className="sk-glow-button">      Start project <span aria-hidden="true">-&gt;</span>    </button>  );}
---// Magnetic CTA Button--- <button class="sk-glow-button">  Start project  <span aria-hidden="true">-></span></button> <style>.sk-glow-button {  display: inline-flex;  align-items: center;  gap: .65rem;  min-height: 44px;  border: 1px solid rgba(213,171,255,.32);  border-radius: 999px;  padding: 0 1.1rem;  color: #fff;  background: linear-gradient(135deg, #7c3aed, #ff66c4);  font: 700 .92rem/1 Inter, system-ui, sans-serif;} .sk-glow-button span {  transition: transform .2s ease;} .sk-glow-button:hover span {  transform: translateX(3px);}</style>

Copy Prompt

Use this prompt to recreate or extend the element with the same intent.

Create a polished Magnetic CTA Button component for a modern Astro or React website. Requirements: - Match the SquadKode visual system with clean spacing, 8px card radius, accessible labels, and responsive behavior. - Provide HTML, CSS, TSX, and Astro versions. - Keep the component lightweight, semantic, and easy to copy into a production page. - Include notes for accessibility, reduced motion, and where this pattern works best. Context: A vivid gradient call-to-action button for hero sections and conversion cards.

Variations

2 related patterns from this category.

Implementation Notes

Small details that make this template useful in production pages.

+

Gradient surface

+

Arrow motion on hover

+

No button shadow required