Scramble Link Button

Buttons 163

About

Link button that scrambles its label into random glyphs on hover before resolving, with an optional underline and arrow icon.

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

Code

How Scramble Link Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import ScrambleLinkButton from "@/components/ui/scramble-link-button";

export default function ScrambleLinkButtonDemo() {
  return (
    <div className="flex min-h-64 w-full items-center justify-center p-12 text-neutral-900 dark:text-neutral-50">
      <ScrambleLinkButton
        btnText="Hover me"
        href="https://vault.hyperiux.com"
        hoverColor="#ff6b00"
        showLine
        showArrow
        onClick={(event) => event.preventDefault()}
      />
    </div>
  );
}