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.
Slide-Up Hover AnimationA hidden layer rises from the bottom of the button, creating a smooth and engaging transition.
Text Replacement EffectThe original label moves upward while a second label inside the animated layer scales into view.
Fully CustomizableAdjust colors, spacing, radius, and typography directly from the properties panel.
Flexible LayoutPadding controls allow the button to easily adapt to different layouts and design systems.
Native Framer ComponentBuilt entirely using Framer’s native tools with no code required.
Responsive by DefaultWorks with different text lengths and layouts.
All button styles and behaviors can be adjusted directly from the properties panel.
TitleSets the text displayed inside the button.
Background ColorDefines the default background color of the button.
Hover ColorControls the color of the animated layer during hover.
Text ColorSets the default label color.
Hover Text ColorDefines the text color during the hover state.
PaddingAdjust the internal spacing of the button.
RadiusControls the corner roundness of the button.
ShadowEnable or customize the button shadow.
LinkAssign a page, URL, or section anchor.
New TabChoose whether the link opens in a new browser tab.
Smooth ScrollEnable smooth scrolling for anchor navigation.
Landing pagesProduct and SaaS websitesPortfolio websitesMarketing websitesModern UI interfaces
Artem Meshkov
