---
title: "Arrow Motion Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Kanghyun Kim · Buttons. Animated arrow hover interaction"
canonical: "https://framer.elliotli.dev/component/arrow-motion-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Arrow Motion Button

# Arrow Motion Button

Animated arrow hover interaction

[View on Framer](https://framer.com/marketplace/components/arrow-motion-button/?via=elliot-li)

![Arrow Motion Button preview image 1](https://framer.elliotli.dev/og/component/arrow-motion-button/43a303579fd8a922/1600x1335.jpg)

## Summary

Animated arrow hover interaction

## Description

A modern call-to-action button featuring a smooth expanding hover animation.

As users hover over the button, the icon container expands while the arrow slides naturally to the right, creating a subtle yet engaging micro-interaction. The animation adds visual feedback without overwhelming the interface, making it perfect for modern websites and landing pages.

Built entirely with native Framer components, Motion Button is easy to customize and integrate into any project. Whether you're building a portfolio, SaaS product, agency website, or marketing page, it provides a polished CTA that feels responsive and intuitive.

## Features

-   Smooth expanding hover animation
    
-   Sliding arrow micro-interaction
    
-   Clean and modern design
    
-   Responsive across desktop and mobile
    
-   Built with native Framer components
    
-   Ready to use in any Framer project
    

## Customization

Customize the button to match your design system with editable properties, including:

-   Button label
    
-   Link destination
    
-   Colors
    
-   Typography
    
-   Shadow
    
-   Icon
    
-   Border radius
    
-   Animation
    

## Perfect For

-   Landing pages
    
-   Portfolio websites
    
-   SaaS products
    
-   Agency websites
    
-   Marketing websites
    
-   Primary call-to-action buttons
    

Simply drop the component into your project, customize it to fit your brand, and create a more engaging call-to-action experience with a smooth, polished hover interaction.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4347

## Details

- **Author**: Kanghyun Kim
- **Published**: 2026-07-14
- **Updated**: 2026-07-14
- **Added**: 2026-07-14
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything