Chamaac UI

DocsComponentsFavouritesSponsor

  • Overview

    • Get Started
    • Components

  • Animated Icons

    • Icons Overview

  • Backgrounds

    • Light SpeedNew
    • SynthesisNew
    • Electric MistNew
    • Astral Flow
    • Nebula
    • Grid Bloom
    • Liquid Chrome
    • Waves
    • Interactive Grid

  • Inputs

    • AI Input

  • Sections

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

  • Buttons

    • Buttons Overview
    • Premium Button
    • Glowing Border
    • Shimmer Button
    • Slide Up Button
    • Focus Button
    • Neo Brutalist
    • Hover Arrow

  • Text Animations

    • Text Loop
    • 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