Tips & tricks
- Fix
- Buttons
- Interaction
Tips & tricks
- Fix
- Buttons
- Interaction
Tips & tricks
- Fix
- Buttons
- Interaction
Framer Buttons Not Working? How to Fix Interaction Issues
Clicking a button in Framer and nothing happens? You’re not alone. There’s a sneaky reason for it, and it’s not a bug. In this quick fix guide, I’ll show you the invisible culprit that’s probably blocking your interactions, and the one property that instantly solves it. If your modals, buttons, or links ever stop responding, this is the first thing you should check.
Posted by
Nandi
Table of contents
The issue
You’ve just set up a slick button in Framer. You preview your site, click it, and… nothing. Nada. Zip. No animation, no modal, no interaction. It’s one of those moments that makes you question everything. But don’t worry, this is a super common issue in Framer, and it’s usually caused by one sneaky little thing.
Let me show you exactly how to fix it.
What’s going on?
If your button is set up properly on the canvas but doesn’t work in preview, chances are there’s something sitting on top of it. Even if you can’t see it, some invisible frame is probably blocking the click. Yep, even transparent layers can mess things up.
Let’s say you’ve got a modal that’s supposed to open when you click a button. You hit preview, click the button, and… nothing happens. It’s frustrating, but totally fixable.
The issue
You’ve just set up a slick button in Framer. You preview your site, click it, and… nothing. Nada. Zip. No animation, no modal, no interaction. It’s one of those moments that makes you question everything. But don’t worry, this is a super common issue in Framer, and it’s usually caused by one sneaky little thing.
Let me show you exactly how to fix it.
What’s going on?
If your button is set up properly on the canvas but doesn’t work in preview, chances are there’s something sitting on top of it. Even if you can’t see it, some invisible frame is probably blocking the click. Yep, even transparent layers can mess things up.
Let’s say you’ve got a modal that’s supposed to open when you click a button. You hit preview, click the button, and… nothing happens. It’s frustrating, but totally fixable.
The issue
You’ve just set up a slick button in Framer. You preview your site, click it, and… nothing. Nada. Zip. No animation, no modal, no interaction. It’s one of those moments that makes you question everything. But don’t worry, this is a super common issue in Framer, and it’s usually caused by one sneaky little thing.
Let me show you exactly how to fix it.
What’s going on?
If your button is set up properly on the canvas but doesn’t work in preview, chances are there’s something sitting on top of it. Even if you can’t see it, some invisible frame is probably blocking the click. Yep, even transparent layers can mess things up.
Let’s say you’ve got a modal that’s supposed to open when you click a button. You hit preview, click the button, and… nothing happens. It’s frustrating, but totally fixable.
A frame sitting on top of the button.
A frame sitting on top of the button.
A frame sitting on top of the button.
Step 1: Find the offending layer
The first thing you want to do is figure out what’s covering your button. In a lot of cases, it’s something like a shadow overlay or a full-screen transparent frame used for visual effects. These layers are often invisible in the preview, but they still block pointer events (like clicks).
So go hunting. Look through your layers panel and try hiding things one by one until your button starts working again. That’s usually the fastest way to spot the culprit.
Step 1: Find the offending layer
The first thing you want to do is figure out what’s covering your button. In a lot of cases, it’s something like a shadow overlay or a full-screen transparent frame used for visual effects. These layers are often invisible in the preview, but they still block pointer events (like clicks).
So go hunting. Look through your layers panel and try hiding things one by one until your button starts working again. That’s usually the fastest way to spot the culprit.
Step 1: Find the offending layer
The first thing you want to do is figure out what’s covering your button. In a lot of cases, it’s something like a shadow overlay or a full-screen transparent frame used for visual effects. These layers are often invisible in the preview, but they still block pointer events (like clicks).
So go hunting. Look through your layers panel and try hiding things one by one until your button starts working again. That’s usually the fastest way to spot the culprit.
Finding the layer that's covering the button
Finding the layer that's covering the button
Finding the layer that's covering the button
Step 2: Disable pointer events
Once you’ve found the layer that’s causing the issue, here’s the fix:
Select the layer in question.
Head over to the right-hand panel.
Next to Style, click the little + icon.
Add the Pointer Events property and set it to none.
What this does is disable the layer’s ability to intercept clicks, so the click passes through it and hits your button like it’s supposed to.
Step 2: Disable pointer events
Once you’ve found the layer that’s causing the issue, here’s the fix:
Select the layer in question.
Head over to the right-hand panel.
Next to Style, click the little + icon.
Add the Pointer Events property and set it to none.
What this does is disable the layer’s ability to intercept clicks, so the click passes through it and hits your button like it’s supposed to.
Step 2: Disable pointer events
Once you’ve found the layer that’s causing the issue, here’s the fix:
Select the layer in question.
Head over to the right-hand panel.
Next to Style, click the little + icon.
Add the Pointer Events property and set it to none.
What this does is disable the layer’s ability to intercept clicks, so the click passes through it and hits your button like it’s supposed to.
Setting pointer events to 'None'.
Setting pointer events to 'None'.
Setting pointer events to 'None'.
Final tip
Now go back to preview mode and try clicking your button again. If all went well, your modal (or whatever interaction you set up) should work like a charm. This issue usually pops up when you’re using overlays, modals, or full-screen animations. So anytime something seems unclickable, always check for a frame that might be unintentionally sitting on top.
Final tip
Now go back to preview mode and try clicking your button again. If all went well, your modal (or whatever interaction you set up) should work like a charm. This issue usually pops up when you’re using overlays, modals, or full-screen animations. So anytime something seems unclickable, always check for a frame that might be unintentionally sitting on top.
Final tip
Now go back to preview mode and try clicking your button again. If all went well, your modal (or whatever interaction you set up) should work like a charm. This issue usually pops up when you’re using overlays, modals, or full-screen animations. So anytime something seems unclickable, always check for a frame that might be unintentionally sitting on top.
