This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Andrew Nalband
Posted Jul 12 - Read on Facebook

If you're like me, you've found it a bit challenging to make a button in Framer that behaves well in a desktop prototype. Here's a short example of how to get a nice button working with a TextLayer using 100% code:

https://framer.cloud/eXQJL

When you edit the text of this button, it will automagically resize to fit the text. You'll get all the expected cursor behavior when clicking on (and mousing over) your button, and color editing is also fast and easy.

Hat tip to Ryan Smith for introducing me to the idea of using a TextLayer as a button.

7 Comments

Ban Nguyen

I have the same problem

Michał Sambora

Andrew Nalband how can I add shadow to the whole shape vs just the text ?

Andrew Nalband

Ban Nguyen Michał Sambora the easiest solution for both of your requests is to break out the text into its own TextLayer and make the button a regular Layer. You can get the same behavior by setting an explicit padding value, making the TextLayer a child of the button layer, and making the width of the parent button dependent on the child text layer. I've added comments that hopefully help explain what's going on. Let me know if this can be more clear: https://framer.cloud/wRizZ

Ban Nguyen

Thank you!

Michał Sambora

Andrew Nalband nice, thanks! I made it work but now it jumps weirdly on first mouse over, not sure why. Can you take a look? https://framer.cloud/zZAEI

Andrew Nalband

Michał Sambora - you were animating the Y value on mouseOver and mouseOut. I just commented those lines out: https://framer.cloud/cImsP

Andrew Nalband

Ah, ok Michał Sambora—now I see what you're trying to achieve. The problem is that when you initially create the button, the height of the button is bigger, so its Y-alignment is in a different place. I added a line for you to center the button after you have adjusted its height based on the text. I added a comment so you can see where it is: https://framer.cloud/CRGzc

Read the entire post on Facebook