Chamaac UI

DocsComponentsSponsor

  • Overview

    • Get Started
    • Components

  • Animated Icons

    • Icons Overview

  • Backgrounds

    • Interactive GridNew

  • Sections

    • How It WorksNew
    • Stats Cards
    • Feature Steps
    • Gauge

  • Buttons

    • Buttons Overview
    • Premium Button
    • Glowing BorderNew
    • Shimmer Button
    • Slide Up Button
    • Focus Button
    • Neo Brutalist
    • Hover ArrowNew

  • Text Animations

    • Text LoopNew
    • Dancing Letters
    • Gif Text

  • Inputs

    • AI Input

  • Navigation

    • Dock

  • Carousels

    • Carousel

Hover Arrow Button

A button that swaps arrows on hover with a smooth sliding animation. The text stays centered while arrows appear and disappear seamlessly.

Installation

npx shadcn@latest add https://chamaac.com/r/hover-arrow-button.json

Props

PropTypeDefaultDescription
textstring"Get Started"The text to be displayed inside the button
durationnumber0.3Duration of the arrow swap animation in seconds
iconSizenumber24Size of the arrow icon in pixels
classNamestring""Custom class names for styling
onClick() => void-Click handler function