Shine Button
A free button with an interaction-driven diagonal sheen.
Marsden Baths
The 1907 pool reopens on 3 November, four years after the boiler gave out. Lane swimming from six in the morning, and the first three months are free to anyone who held a ticket the week it closed.
Shine Button is a free shine button React component for Next.js, React and Tailwind that sends one diagonal sheen across a real CTA link when it is hovered or receives keyboard focus.
The button sheen effect is pure CSS and only animates transform and opacity, so it never moves layout or starts an ambient loop. Reduced-motion users receive an immediate static highlight, while the semantic label, border and focus outline remain complete in every state.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/btn-shineUsage
import { ShineButton } from "@/components/ui/btn-shine";
export default function Page() {
return (
<ShineButton
label="Claim your three months"
href="/components"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Button text rendered as the anchor's accessible label. |
| href | string | required | Destination passed to the real anchor element. |
| className | string | undefined | Additional classes merged onto the anchor. |
Customisation
Shine Button exposes two Tier 3 CSS custom properties. Set --btn-shine-color to retheme the diagonal band and --btn-shine-duration to change the length of its single interaction-driven sweep. Both tokens include safe fallbacks, so the installed component also works outside the Template Empire theme.
:root {
--btn-shine-color: var(--ring, currentColor);
--btn-shine-duration: 450ms;
}Frequently asked questions
- Is Shine Button free for commercial use?
- Yes. Shine Button is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Shine Button accessible and performant?
- Yes. It renders a real anchor with a visible text label and a distinct focus outline. Its decorative layers ignore pointer input, the interaction animates only transform and opacity, and reduced-motion users receive an immediate static treatment with no sweep.
- How do I change the sheen colour or speed?
- Override --btn-shine-color with a semantic colour token and --btn-shine-duration with the desired interaction duration on :root or any ancestor. The label, surface and focus styles remain unchanged.