Chamaac UI

DocsComponentsFavouritesSponsor

  • Overview

    • Get Started
    • Components

  • Animated Icons

    • Icons Overview

  • Backgrounds

    • SynthesisNew
    • Electric MistNew
    • Astral FlowNew
    • Nebula
    • Grid Bloom
    • Liquid Chrome
    • Waves
    • Interactive Grid

  • Inputs

    • AI Input

  • 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 Arrow

  • Text Animations

    • Text LoopNew
    • Dancing Letters
    • Gif Text

  • 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

Build with ❤️ by Amarnath Dhumal