Skip to content

component

Send Button

By EstherGrimm

Details

Summary

Add a touch of delight to your user interactions with this premium, motion-driven Send button.

Description

Add a touch of delight to your user interactions with this premium, motion-driven Send button. Designed specifically for Framer, this component uses fluid physics to create an engaging micro-interaction whenever a user hovers or clicks. Core Features: Dynamic Hover State: The paper plane icon smoothly takes flight (translates and rotates) while the button text elegantly slides aside to make room. Tactile Click Effect: Includes a satisfying "press" animation (scale: 0.95) to give users immediate visual feedback upon interaction. Auto-Layout Ready: Fully supports Framer's auto width and height constraints, naturally adapting to the text label and padding you set. No-Code Customization: You don't need to touch a single line of code to make this button yours. Control everything directly from the Framer right-hand sidebar: Content: Easily change the button label text. Colors: Independent color pickers for the Background, Text, and the SVG Icon. Styling: Adjust the Border Radius for sharp or pill-shaped buttons, tweak the Font Size, and define custom CSS Padding for perfect proportions. Perfect For: Contact forms and newsletter signups. Chatbot interfaces and messaging apps. Any primary Call-to-Action (CTA) that needs to stand out and feel alive. Simply drag, drop, and customize to bring professional-grade motion design to your Framer site in seconds.

Introduction

Animated Send Button with Flying Icon

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600179238/148/228/309/79/15
  • All · #7824