Aceternity Button

Component 8

About

A soft, convex tactile button component featuring inner shadows, active scaling states, and smooth gradients for premium feedback.

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

Code

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

Usage.tsx

"use client";

import React from "react";
import AceternityButton from "@/components/ui/aceternity-button";

export default function AceternityButtonPreview() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 p-8 select-none">
      <AceternityButton variant="primary">Primary</AceternityButton>

      <AceternityButton variant="secondary">Secondary</AceternityButton>

      <AceternityButton variant="outline">Outline</AceternityButton>

      <AceternityButton variant="ghost">Ghost</AceternityButton>

      <AceternityButton variant="destructive">Destructive</AceternityButton>

      <AceternityButton variant="secondary" isLoading>
        Loading
      </AceternityButton>
    </div>
  );
}