component
Lift Button
By Artem Meshkov
Details
- Artem MeshkovAuthor
- componentType
- $5.00Price
- 2026-03-19Published
- 2026-03-21Updated
- 2026-03-11Added
- ButtonsCategories
Summary
Animated button with slide-up hover
Description
Overview This animated call-to-action button adds a subtle but satisfying interaction to your design. When users hover over the button, a hidden layer slides up from the bottom and pushes the original label upward. As the layer expands, it reveals a second label inside that smoothly scales into place, creating a clean and engaging text transition. The result is a minimal yet playful interaction that makes buttons feel more dynamic while staying clean and professional. Perfect for landing pages, product interfaces, portfolios, and modern websites. Key Features Slide-Up Hover Animation A hidden layer rises from the bottom of the button, creating a smooth and engaging transition. Text Replacement Effect The original label moves upward while a second label inside the animated layer scales into view. Fully Customizable Adjust colors, spacing, radius, and typography directly from the properties panel. Flexible Layout Padding controls allow the button to easily adapt to different layouts and design systems. Native Framer Component Built entirely using Framer’s native tools with no code required. Responsive by Default Works with different text lengths and layouts. Customization All button styles and behaviors can be adjusted directly from the properties panel. Title Sets the text displayed inside the button. Background Color Defines the default background color of the button. Hover Color Controls the color of the animated layer during hover. Text Color Sets the default label color. Hover Text Color Defines the text color during the hover state. Padding Adjust the internal spacing of the button. Radius Controls the corner roundness of the button. Shadow Enable or customize the button shadow. Link Assign a page, URL, or section anchor. New Tab Choose whether the link opens in a new browser tab. Smooth Scroll Enable smooth scrolling for anchor navigation. Designed For Landing pagesProduct and SaaS websitesPortfolio websitesMarketing websitesModern UI interfaces
Introduction
Animated button with slide-up hover
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #6524