Creating a Portfolio Button Animation On Hover in Webflow

John
August 18, 2022

Clone the interaction here for free: https://webflow.grsm.io/interaction?interaction=webdev-for-you-daily-interaction-155

Adding subtle effects to buttons on a website can really add more depth and fluidity to a static page. In the following article I will go over how to create a simple yet effect portfolio button animation in Webflow without writing a single line of code.

Step 1: Add Link Block

Add a link block and name it “link-block-wrapper.”

Set the display setting to flex:

  • Direction: Horizontal
  • Align: Stretch
  • Justify: Start

Set the typography to:

  • Font: DM Sans (or any font you’d like)
  • Weight: 500-Medium
  • Size: 14px
  • Height: 1-
  • Color: Black or #000000
  • Decoration: None
  • Letter Spacing: 2px
  • Capitalize: ALL CAPS

Step 2: Add Pill Shape

Add a div block inside of the “link-block-wrapper” and name it “button-text-wrapper.”

Set the display setting to flex:

  • Direction: Horizontal
  • Align: Center
  • Justify: Center

Add 20px of padding to the left and the right and 10px of margin to the right. Set the height of the div block to 34px.

Add a solid border with a width of 2px and a color of black or #00000.

Set the border radius to 100px.

Step 3: Add Text

Add a text block inside of the “button-text-wrapper” and type in “View Work.” The typography should already be styled since it will be inheriting the styles we applied to the parent link block.

Step 4: Add Circle

Inside the “link-block-wrapper” add another div block and name it “circle-wrapper.”

Set the width and height to 34px.

Set the overflow to hidden.

Set the background color to white or #ffffff.

Give it a solid border with a width of 2px and the color black or #000000.

Set the radius to 50%. This will create a perfect circle for this div because it is a perfect square of 34 x 34 px.

Step 5: Add Arrow Icon

Inside of the “circle-wrapper” add an image element and give it the class name “arrow-icon.”

Add an arrow icon pointing up for the image. You can get free icons here: https://www.majesticons.com/.

Set the padding for the icon to 4px on all sides. This will reduce the size of the icon slightly to fit better in the circle. You can resize to anything you’d like for the desired size of the arrow.

Copy and paste this “arrow-icon” so that there are two “arrow-icon” images inside of the “circle-wrapper.” Only one should be visible as the “circle-wrapper” has an overflow of hidden so anything out of its 34 x 34px bounds will not be visible.

Step 6: Create Button Interaction/Animation

Add the interaction by selecting the “link-block-wrapper” and then going to the lightning bolt symbol in the upper-right. You can select the “link-block-wrapper” directly on the canvas or via the navigator panel.

Click the + icon next to “Element Trigger” and select “Mouse Hover.” On hover select an action and click “Start an animation.” Create a new Timed Animation by clicking the + icon and call it “button hover in.”

Select the “circle-wrapper” and add a “BG Color” action by click the + in the upper-right. Set the color to white or #ffffff and then set it as the initial state by clicking “Set as initial state” under “Timing.”

Select the “arrow-icon” (either on the canvas or in the navigator) and add a “Move” action. Move the “arrow-icon” -100% on the y-axis. Set the duration to .2s and an easing of ease.

Select the “circle-wrapper” icon and add a “BG Color” action. Set the color to any color you’d like. In the example above I chose a yellow color with the hex code #ffdf6d. Set the duration to .2s and an easing of ease. Click hold and drag this timed action over the recent “Move” timed action to have them start together.

Select the “circle-wrapper” icon and add a “Border Color” action. Set the color to the same color that was just added for the “BG Color.” In this example it would be #ffdf6d. Set the duration to .2s and an easing of ease. Click hold and drag this timed action over the recent “Move” timed action to have them start together.

Click “Done” and then go to “On hover out.” Here duplicate the “button hover in” interaction click on it and rename it to “button hover out.” Here delete the initial timed action, so there should only be three timed actions (Move, BG color, and Border color).

Set the move property to 0%.

Set the BG Color back to white or #ffffff.

Set the border color back to black or #000000.

This will reset on the animation when the user hovers out of the button.

That’s it!

You have now created a unique button hover animation in Webflow!

To get started with Webflow and follow along with the tutorial click here: https://webflow.grsm.io/get-started.

As a photographer, it’s important to get the visuals right while establishing your online presence. Having a unique and professional portfolio will make you stand out to potential clients. The only problem? Most website builders out there offer cookie-cutter options — making lots of portfolios look the same.

That’s where a platform like Webflow comes to play. With Webflow you can either design and build a website from the ground up (without writing code) or start with a template that you can customize every aspect of. From unique animations and interactions to web app-like features, you have the opportunity to make your photography portfolio site stand out from the rest.

So, we put together a few photography portfolio websites that you can use yourself — whether you want to keep them the way they are or completely customize them to your liking.

12 photography portfolio websites to showcase your work

Here are 12 photography portfolio templates you can use with Webflow to create your own personal platform for showing off your work.

1. Jasmine