Mohamed Uvaish

Web Shot Button

Buttons 62

About

A red glass button that shoots silk threads at the pointer. They leave from the edge facing it, meet at the pointer and spring back when it leaves. Red by default, or any tint, and the label turns black on light glass. On a phone, press and drag out of the button.

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

Code

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

Usage.tsx

import { ArrowRight } from "lucide-react";
import { Component as WebShotButton } from "@/components/ui/web-shot-button";

export default function WebShotButtonDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center p-10">
      <WebShotButton>
        Explore components
        <ArrowRight />
      </WebShotButton>
    </div>
  );
}

Dependencies

More by Mohamed Uvaish

View all
  • Signature Pad

    Signature Pad

    437
  • Folder Card

    Folder Card

    348
  • Share Dialog

    Share Dialog

    313
  • Kanban Board

    Kanban Board

    275
  • Notification Panel

    Notification Panel

    112
  • Charts & KPI Cards

    Charts & KPI Cards

    101
  • Rich Text Editor

    Rich Text Editor

    52
  • Command Menu

    Command Menu

    41

More in Buttons

View all
  • Texture Button

    Texture Button

    98
  • Button

    Button

    1
  • Button

    Button

    68
  • Eclipse Button

    Eclipse Button

    3
  • Button

    Button

    65
  • App Store Button

    App Store Button

    458
  • Base Button

    Base Button

    4
  • HeroUI Button Group

    HeroUI Button Group

    2