Dancepad

Getting started
Introduction Installation
Texts
Arc Title Blade Reveal Blended Hover Blur Reading Blur Reveal Counter Decode Hover Decode Reveal Fluid Gradient Highlight Hover Letter Launcher Looping Lines Mousefill Title Random Letters Scroll Reading Swap Hover Text Shimmer Twist Reveal Typed Underline Hover Unfold Hover Unfold Reveal 3D Swap Hover
Buttons
Anyside Button Arrow Button Arrow Button v2 Arrow Button v3 Arrow Icon Crystal Button Glowing Button Layer Button Marquee Button Marquee Button v2 Mask Button Modal Button Prism Button Ripple Button Ripple Button v2 Ripple Button v3 Shiny Button
Menus
Burger Circular Menu Dock Drawer Dropdown Dropdown megaMenu Dynamic Island Expanding Menu Focus Nav Gooey Nav Morphing Nav Multi Offcanvas Menu Offcanvas Menu Overlay Menu Sticky Header
Medias
Before/After Image Image Hotspots Image Reveal Parallax
Cursors
Cursor Cursor Slide Designer Cursor
Sliders
Infinite Slider Parallax Slider
Backgrounds
Border Beam Fluids Gradiently Grainy Particles Physics Spotlight Spotlight v2 Tiles
Cores
Accordion Back to Top Click and Copy Flipbox Glitchy Glowing Card Horizontal Marquee Interactive Divider Inverted Corner Mask Hover Motion Divider Observer Parallax Hover Progress Bar QR Code Scrollbar Smooth Scroll Stacking Cards Tabs Tippy Pixels Shimmer Card Vertical Marquee
Jose Tamu
January 10, 2025 /
Intermediate

Arrow Button

Arrow Button
Arrow Button

Content tab

Swap Text group

Include Swap Text: if enabled, a Swap Hover will be included at the label with the possibility to customize the swap content.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Arrow Animation group

Distance between arrows: determines how much distance to apply until the second arrow enters on hover.
Scale: determines how much scale to apply on hover.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Style tab

Arrow Button consists of a label, an arrow and the button itself, so there are 3 parts to style and several combinations that can be achieved. First demo has styles at the label and the arrow. Second demo has styles at the button and the arrow.
The style tab contains all the groups to customize the typography, background, border, padding and more of the 3 parts (button, label and arrow) that make up the Arrow Button.