Raised Button

Buttons

About

A 3D raised button with a glossy top highlight, press animation, and customizable colors that auto-adjust text contrast.

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

Code

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

Usage.tsx

import { RaisedButton } from "@/components/ui/raised-button";

export default function RaisedButtonDemo() {
  return (
    <div className="flex min-h-[220px] w-full flex-wrap items-center justify-center gap-4 bg-background p-8">
      <RaisedButton>Get Started</RaisedButton>
      <RaisedButton color="#6366f1">Indigo</RaisedButton>
      <RaisedButton color="#10b981">Emerald</RaisedButton>
      <RaisedButton size="lg" color="#f59e0b">
        Amber
      </RaisedButton>
    </div>
  );
}