Shader Button

Shaders 41

About

Exact optical blend-mode shader button with rotating multi-layer difference filters, specular light pulse, and smooth native button interaction.

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

Code

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

Usage.tsx

import * as React from "react";
import { GradientButton } from "@/components/ui/shader-button";

export default function GradientButtonDemo() {
  return (
    <div className="relative flex min-h-screen w-full flex-col items-center justify-center gap-6 bg-background p-8 text-foreground">
       <div className="mt-4 flex items-center justify-center gap-4">
        <GradientButton onClick={() => console.log("Standard button click!")}>
          Start
        </GradientButton>
      </div>
    </div>
  );
}