Inline CTA

CTAs

About

A call-to-action phrase embedded inside a sentence that lifts into a pill with a sliding arrow on hover or focus, so the action reads as part of the copy rather than a separate button.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Inline CTA to your project and fits it to your theme.

Code

How Inline CTA is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import InlineCta from "@/components/ui/inline-cta";

export default function InlineCtaDemo() {
  return (
    <div className="flex w-full min-h-[420px] items-center justify-center bg-[#0c0b0a] px-[8%] py-16">
      <InlineCta
        before="Have an idea that needs a careful hand? Let\u2019s"
        action="build it together"
        after="\u2014 properly."
        caption="Hamza Al-Bulushi \u00b7 replies within a day"
      />
    </div>
  );
}