Docs
→
Button
→
Shiny Tooltip Button

Shiny Tooltip Button

A compact button with a moving shimmer highlight on hover and a clean content plate.

by Sarthak Kapila

Installation

Usage

Shiny Tooltip Button Example

1import ShinyButton from "@/components/Hover-2-seats";
2

3export default function Example() {
4  return (
5    <ShinyButton 
6      title="Buy now" 
7      link="#"
8      width={117}
9      height={44}
10    />
11  );
12}

Understanding the component

The button renders a background shimmer layer that slides up and fades in on hover, revealing a bright highlight above the content plate. The shimmer text is rendered by an internal TextShimmer component.

Credits

By Sarthak Kapila.

Props

PropTypeDefaultDescription
titlestring"Buy now"Text displayed inside the button.
linkstring"#"Optional link to wrap the button (Next.js Link).
classNamestring-Optional class name on the root container.
styleReact.CSSProperties-Inline styles for the root container.
widthnumber117Outer width of the button.
heightnumber44Outer height of the button.