Marketplace
Made in Webflow

WebDev For You - Daily Interaction #103

1833 views
site profile thumbnail

Description

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!
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
webdevforyoudailyinteractioninteractionscardctaarrowrotateangledhover effectshoverhover-cardcta-button

More by WebDev For You

See profile
View details
WebDev For You - Daily Interaction #8
204
976