Have any of you created a button similar to the one from WeTransfer and if so, could you explain how it can be done in Webflow?

Published on
September 22, 2023

Yes, it is possible to create a button similar to the one from WeTransfer in Webflow. Here's a step-by-step guide on how you can achieve this:

  1. Create a new project in Webflow and open the designer.
  2. Add a new section to your page and give it a class. This will serve as the container for your button.
  3. Inside the section, add a new div block and also give it a class. This div will be the parent element for your button content.
  4. Style the div block as needed to create the desired layout for your button. You can adjust the background color, borders, and padding to match the WeTransfer button style.
  5. Inside the div block, add a text element and type in the text for your button.
  6. Give the text element a class and style it accordingly, such as adjusting the font size, color, and alignment.
  7. Now, let's add the hover effect to the button. Select the div block and go to the interactions panel.
  8. Click the "+" button to add a new interaction, and choose the "Hover" trigger.
  9. In the "While hovering" section, select the "Start an animation" action.
  10. Click the "+" button to add a new animation, and choose the "Transform" option.
  11. In the transform animation settings, you can adjust properties like scale, rotation, and opacity to create a hover effect that matches the WeTransfer button.
  12. Once you're done setting up the hover animation, click "Save" to apply the changes.
  13. Lastly, you can also add a link to your button. Select the text element and go to the link settings in the settings panel.
  14. Enter the URL you want the button to link to and customize any other link attributes as needed.

That's it! You have now created a button similar to the one from WeTransfer in Webflow. Remember to publish your project to see the button in action on your live site.

Additional questions:

  1. How can I customize the hover effect for my button in Webflow?
  2. Can I add icons or images to my button in Webflow?
  3. Is it possible to create a button with different states, such as active or disabled, in Webflow?