---
title: "Smooth Slide Button — Framer component · Best of Framer"
description: "$2.00 · Framer component · by Rain Ruan · Buttons. The Smooth Slide Button features a sophisticated character-level transition effect that slides text out while revealing a new message on hover."
canonical: "https://framer.elliotli.dev/component/smooth-slide-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Smooth Slide Button

# Smooth Slide Button

Elegant animated button

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

![Smooth Slide Button preview image 1](https://framer.elliotli.dev/og/component/smooth-slide-button/e48118b8c4f291d6/1600x1200.jpg)

## Summary

The Smooth Slide Button features a sophisticated character-level transition effect that slides text out while revealing a new message on hover.

## Description

Elevate your website's interactivity with this polished **Code Component**. The Smooth Slide Button features a sophisticated character-level transition effect that slides text out while revealing a new message on hover.

**✨ Key Features:**

-   **Character-Level Animation:** Unlike standard buttons, letters slide individually for a premium feel.
    
-   **Fully Customizable:** Control fonts (Typography), colors, borders, radius, and padding directly from the sidebar.
    
-   **Dual States:** distinct text for "Default" and "Hover" states (e.g., "Confirm" -> "Send").
    
-   **Responsive Ready:** Adapts perfectly to different layouts with auto-sizing support.
    
-   **Smooth Physics:** Fine-tuned Framer Motion spring curves for a tactile, high-end experience.
    

Perfect for luxury portfolios, agencies, and modern SaaS landing pages.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-a0w06278-kLEWkmiw5AlpoZfUwA7Mp4xyeFO7ET)

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

-   All · #9281

## Details

- **Author**: Rain Ruan
- **Price**: $2.00
- **Published**: 2026-01-17
- **Updated**: 2026-02-08
- **Added**: 2025-12-31
- **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