How to build interactive buttons on Framer
Quick Answer
Build interactive buttons in Framer by creating a frame, styling it, adding text, converting to a component, and setting up hover/click states with variants. Use the Properties panel to customize animations and behaviors for seamless user interactions.
Prerequisites
- Basic understanding of Framer interface
- Framer account setup
- Familiarity with design tools
- Understanding of component basics
Step-by-Step Instructions
1
Create a Basic Button Frame
Start by drawing a frame using the Frame tool from the toolbar or press
F. Set the frame dimensions to your desired button size (e.g., 120x40px). In the Properties panel, add a background color, set border radius for rounded corners, and adjust the stroke if needed. Name your frame something descriptive like Button in the layers panel. Use consistent sizing across your buttons by setting specific width and height values rather than drawing freehand.
2
Add Text to Your Button
Select the Text tool or press
T, then click inside your button frame to add text. Type your button label (e.g., "Get Started"). In the Properties panel, adjust the font family, size, weight, and color. Center the text by selecting both the frame and text, then using Auto Layout or the alignment tools in the Properties panel. Enable Auto Layout on your button frame to automatically center text and handle padding consistently.
3
Convert to Component
Select your entire button (frame and text) and right-click to choose Create Component or press
Cmd/Ctrl + K. This creates a reusable component that appears in your Assets panel. Name your component clearly in the Properties panel. Components allow you to create multiple instances and add interactive states. Always convert buttons to components before adding interactions - this makes them reusable and easier to maintain.
4
Add Hover State with Variants
With your component selected, go to the Properties panel and click Add Variant. Rename the default variant to
Default and the new variant to Hover. Select the Hover variant and modify its appearance - change background color, scale, or shadow. You can adjust these properties in the Properties panel. Keep hover effects subtle - slight color changes or small scale increases (1.05x) work best for professional designs.
5
Set Up Hover Interactions
Select the
Default variant and open the Interactions panel. Click Add Interaction and choose While Hovering as the trigger. Set the action to Change to Variant and select your Hover variant. Adjust the animation settings - try Spring animation with 0.2s duration for smooth transitions. Use spring animations for hover effects as they feel more natural than linear transitions.
6
Add Click/Tap Interactions
Create another variant called
Pressed with a slightly different appearance (darker color or smaller scale). In the Interactions panel, add a Tap trigger that changes to the Pressed variant, then immediately transitions back to Default or your target action. For navigation, use Navigate to and select your destination page. Add a brief delay (0.1s) on the pressed state so users can see the feedback before navigation occurs.
7
Customize Animation Properties
Fine-tune your button's animations in the Interactions panel. Experiment with different easing curves like Ease Out or Spring. Adjust duration, delay, and damping values. For hover effects, set While Hovering to animate in on mouse enter and animate out on mouse leave automatically.
Keep animations under 0.3 seconds for buttons to maintain a responsive feel.
8
Test and Deploy Your Interactive Button
Click the Preview button or press
Cmd/Ctrl + P to test your interactive button. Check that hover states work smoothly and click interactions function as expected. Once satisfied, you can reuse this component throughout your project by dragging it from the Assets panel or publish your site using Publish in the top-right corner. Test your buttons on different devices using Framer's device preview options to ensure they work well on mobile and desktop.
Common Issues & Troubleshooting
Hover effect not working
Ensure you've created variants properly and set up While Hovering trigger in the Interactions panel. Check that your component is properly converted and not just a frame.
Button text not centered
Select your button frame and enable Auto Layout in the Properties panel. Set direction to vertical and align items to center, or use the alignment tools with both text and frame selected.
Animation feels jerky or slow
Adjust the animation duration to 0.2-0.3 seconds and try Spring easing instead of linear. Check that you're not animating too many properties simultaneously.
Button component instances not updating
Ensure you're editing the main component, not an instance. Look for the purple diamond icon indicating the main component, and make changes there to propagate to all instances.
Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Framer website before purchasing.