Circle Buttons

Buttons 4

About

A round icon button with layered CSS glass, gradient, or dashed-frame styling and play/plus/mail presets for landing pages and toolbars.

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

Code

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

Usage.tsx

import { CircleButtons } from "@/components/ui/circle-buttons";

export default function CircleButtonsMailDemo() {
  return (
    <div className="shader-frame">
      <CircleButtons
        variant="mail"
        mode="dark"
        hue={0}
        saturation={1.0}
        brightness={1.0}
      />
    </div>
  );
}