Component
3D Text Flip Button Component
This is a fully customizable button component featuring a stunning 3D text flip animation on hover. Created in Framer, this component is perfect for adding a touch of interactivity and modern flair to your projects. Simply copy and paste it into your site and tweak the properties to fit your design needs.
Created by
About the resource
To create this hover interaction, I had to make a button component with multiple text layers inside. Two text layers on the button are positioned absolutely so I can move them around freely. One is in the center, and the other is slightly pushed to the top or bottom depending on the state. The one that's pushed up or down also has a 3D transform, rotating it along the X axis.
About the resource
To create this hover interaction, I had to make a button component with multiple text layers inside. Two text layers on the button are positioned absolutely so I can move them around freely. One is in the center, and the other is slightly pushed to the top or bottom depending on the state. The one that's pushed up or down also has a 3D transform, rotating it along the X axis.
About the resource
To create this hover interaction, I had to make a button component with multiple text layers inside. Two text layers on the button are positioned absolutely so I can move them around freely. One is in the center, and the other is slightly pushed to the top or bottom depending on the state. The one that's pushed up or down also has a 3D transform, rotating it along the X axis.
The button component with two text layers.
The button component with two text layers.
The button component with two text layers.
As you can see in the image above, in the default state of the button, there's a visible text layer in the center and a hidden text layer pushed down with a 3D rotation (highlighted in blue in the image).
With this setup, all I have to do is add a hover state to the button, push the main text to the top, change its opacity to 0, and add a 3D rotation. Then, I animate the text in from the bottom by centering it, making it visible, and removing all 3D transform effects.
As you can see in the image above, in the default state of the button, there's a visible text layer in the center and a hidden text layer pushed down with a 3D rotation (highlighted in blue in the image).
With this setup, all I have to do is add a hover state to the button, push the main text to the top, change its opacity to 0, and add a 3D rotation. Then, I animate the text in from the bottom by centering it, making it visible, and removing all 3D transform effects.
As you can see in the image above, in the default state of the button, there's a visible text layer in the center and a hidden text layer pushed down with a 3D rotation (highlighted in blue in the image).
With this setup, all I have to do is add a hover state to the button, push the main text to the top, change its opacity to 0, and add a 3D rotation. Then, I animate the text in from the bottom by centering it, making it visible, and removing all 3D transform effects.
Component properties of the button.
Component properties of the button.
Component properties of the button.
If you don't want to make this component from scratch, you can also copy it into your project and customize it using the component properties found in the right panel.
If you don't want to make this component from scratch, you can also copy it into your project and customize it using the component properties found in the right panel.
If you don't want to make this component from scratch, you can also copy it into your project and customize it using the component properties found in the right panel.
