About
MediaButton is a reusable React component that displays a button with a smooth hover effect revealing a looping .mp4, .webm, or .gif background, with a dark overlay to keep the text readable.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Media Button to your project and fits it to your theme.
Code
How Media Button is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import React from 'react';
import { MediaButton } from "@/components/ui/media-button";
export default function Demo() {
return (
<div className="h-screen flex flex-col items-center justify-center gap-10 bg-muted">
<MediaButton
label="Button (Video)"
mediaUrl="https://cdn.21st.dev/assets/mirror/9b/9b72a2e7ff75d9bc7e60c6b7bcba8197432fa51f924f3e6b0ca25fbd07d99573.mp4"
/>
<MediaButton
label="Button (GIF)"
mediaUrl="https://cdn.21st.dev/assets/mirror/b7/b7efd19cbe3a84627d84304ef41aab2b256240c34b6caa4a2683d5f28511b446.gif"
/>
</div>
);
}