---
title: "Ripple Type Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Idriss Taleb · Buttons. Alternating letter-slide hover"
canonical: "https://framer.elliotli.dev/component/ripple-type-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Ripple Type Button

# Ripple Type Button

Alternating letter-slide hover

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

![Ripple Type Button preview image 1](https://framer.elliotli.dev/og/component/ripple-type-button/b70ad95ac84cfaa9/1600x964.jpg)

## Summary

Alternating letter-slide hover

## Description

Give your nav bar a hover state that actually feels designed. Ripple Type is a code component built around a staggered, alternating letter-slide animation — instead of the whole label sliding as one block, each character flips independently: even letters glide right, odd letters glide left, with an incremental delay per letter so the motion ripples across the word instead of firing all at once.

**How it works** Every letter is masked in its own reveal window holding two stacked copies of the character. On hover, the visible letter slides out (with a subtle skew for a bit of snap) while a duplicate slides in from the opposite side — so the word never just "moves," it exchanges itself letter by letter.

**Fully customizable, no code required**

-   Button text and link (with optional new-tab)
    
-   Background color + hover background color
    
-   Text color + hover text color
    
-   Corner radius, font size, font weight, padding, and height
    

Drop it straight into a nav bar as a Contact/Menu/CTA link, or use it anywhere you want a small interactive moment — footer links, pricing CTAs, header nav items. Because every color is exposed as a property control, it re-themes instantly to match dark, light, or brand-color nav bars without touching the code.

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

-   All · #3370

## Details

- **Author**: Idriss Taleb
- **Published**: 2026-07-30
- **Updated**: 2026-07-30
- **Added**: 2026-07-30
- **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