Typing Hover Button

About Component

Typing Hover Button is a playful interactive button that reveals its text with a smooth typewriter animation on hover, complete with a blinking cursor.It’s perfect for adding personality and micro-interaction to navigation elements, CTAs, and interactive links. When users hover over the button, the text is progressively typed character by character, creating a dynamic and engaging effect. The cursor blinks naturally during the typing animation, reinforcing the classic typewriter-style interaction.

Fully customizable inside Framer, you can control typing speed, cursor appearance, typography, and link behavior to perfectly match your design system.

Live Preview

https://typinghoverbutton.framer.website/

Properties

/ Content

Text – The text displayed inside the buttonLink – URL destination for the buttonOpen in New Tab – Toggle whether the link opens in the same tab or a new tab

/ Typography

Font – Choose any font family and styleText Color – Set the button text color

/ Animation

Typing Speed – Control how fast the characters appear during the typing animationCursor Blink Speed – Adjust the blinking speed of the cursor

/ Style

Cursor Color – Set the cursor colorCursor Width – Adjust the thickness of the cursor

Use cases

Navbar links · Hero buttons · Portfolio navigation · Interactive CTAs · Landing pages · Creative micro-interactions · Minimal UI interactions

Refund Policy

All sales of digital products are final and non-refundable.If you have any questions about the product, please contact me at info@carontefrancesco.it before completing your purchase. I'm happy to help.