componentshiny-buttonsource: ok · hit

Shiny Button

A Button component with shiny effect animation.

npx shadcn add "https://tailwind-admin.com/r/shiny-button.json"

free

Tailwind Admin

No selection tags yet — empty means no evidence, not lack of support.

Dependencies

Bundle weight · light

Registry dependencies

button

Files2 · source cached 10/15/2026, 8:20:51 AM

src/app/components/animatedComponents/buttons/shiny-effect/ShinyButton.tsx



import { Card } from "@/components/ui/card";
import "./shiny.css";
import { Button } from "@/components/ui/button";

export default function ShinyButton() {
  return (
    <>
        <Button className=" bg-primary transition-all" >
          <div className='shiny font-medium text-base'>Shiny Button Text</div>
        </Button>
    </>
  );
}

src/app/components/animatedComponents/buttons/shiny-effect/shiny.css

.shiny {
  color: #00ceffa4;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
  animation: shine 3s linear infinite;
}

@keyframes shine {
  0% {
    background-position: 100%;
  }
  100% {
    background-position: -100%;
  }
}

More from Tailwind Admin

Action Tracking Motioncomponent Alert Card Motioncomponent Animate Border Card Motioncomponent Animate Table Motioncomponent Animated List Motioncomponent Animated Tab Motioncomponent Animated Text Background Motioncomponent Animated Tooltip Motioncomponent

Browse all components in this library →