Span Hover Effect - Transform Y

Hey guys,

I’ve been wanting to recreate this (2nd) effect in webflow but I havn’t had any luck.

[https://codepen.io/hafizfattah/pen/tkgyK](http://Link here)

Hoping someone can point me to a post or maybe whip up a demo :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @Thomas_92

Something like this? http://button-title-slide-up-on-hover.webflow.io

Here’s a link to the project so that you can dissect it.

https://preview.webflow.com/preview/button-title-slide-up-on-hover?preview=cd06311416f90fdd7a50d4fe9a7dd2de

Hope that helps. Happy designing!

1 Like

Updated the project with a 2nd way to achieve this with only one text element inside the link. Makes more use of the interaction features and easier to edit the text on screen since there’s no hidden 2nd text element that needs to be named the exact same. The main visual difference is you won’t see the grey and white text simultaneously as the transition happens. Subtle difference but noticeable.

Lastly I made a 3rd row of buttons to show how having two text elements can be both fun and informative too.

1 Like

Oh damn! You’re too good :smiley:

Thanks heaps for sharing man, perfecto!!

1 Like

Great. Just made it clone-able. Always glad to help!