WebDev For You - Daily Interaction #103

Welcome to daily interaction #103!
This demo showcases a card with a call-to-action (CTA) button that appears at an angle when the user hovers. This can be a great way to let users know that when they click they will be taken to another page.
To create this animation I first created a card wrapper with the elements in it. I set the card wrapper to a position of relative. I then placed a div block inside of the card wrapper and set the position to absolute and 50% width and 120% height so that I could angle it in and not lose height at the top. I then moved this div block 100% to the right from the card. With interactions I rotated this div block -10 degrees. I also placed an arrow in the slanted div block and rotated the arrow 10 degrees to offset the -10 angle. The border also changes color on hover.
Happy Webflowing!
Inspired by: https://codepen.io/andrewsims/pen/mQoYwz
If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!
Similar sites

29
123

16
80

36
138

32
125

194
1.3k

41
171