Button with Hover and Active Effects

This React component renders a button with a dotted border, white background, and black text. On hover, it subtly translates and adds a shadow; on active click, it reverts to its original state. The styling uses Tailwind CSS for rapid UI development.

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

import DottedButton from "@/components/ui/button-with-hover-and-active-effects";

export default function DemoOne() {
  return <DottedButton />;
}