Button animations on hover - is it possible?

Design help General
#1

Hello!

I’m a visual designer and so a bit of a newbie in terms of code and stuff. I haven’t started building my site yet, just doing a bit of research and came across some nice button animations here: https://codepen.io/giana/pen/dMdyaX . I was wondering if something like this is possible in webflow? Can I copy in the custom code somehwere? I managed to use a gif as a button hover background but it looked a bit rubbish! A gradient hover would look pretty cool too, would they be possible? https://codepen.io/pirrera/pen/bqVeGx

Also can someone tell me if this doable in webflow please? https://codepen.io/Mastodonic/pen/ZYbqPv?limit=all&page=2&q=follow+cursor

Thanks very much for any help! :blush:

#2

Hi Gemma,

First links animation you may do with copy/past reference code.

Second and third links animations I think may create in Webflow.

Today I try and show it)

#3

Here live version: http://broplayground.webflow.io/

Read-only: https://preview.webflow.com/preview/broplayground?preview=40af429e66874b74d9b8b7eef49c2ac1

#4

Here is a video showing how to do it with the codepen.
https://youtu.be/zxBCQpyojWo.

I erased the body code in the css before I pasted it in the html embed on webflow.

1 Like
#5

Awesome thanks so much to you both for all your help! I’m going to start building my site today :grinning:

#6

Hey, thanks for that vid…

…a quick question on this…how do you then make it link to a specific page (or anything)??

I’ve made the animation work visually on this site:

http://july-design.webflow.io/

I’d for it to link to

Is there a piece of code that goes in the HTML box that does that…I understand that HTML blocks can’t be placed into link blocks…

My code understanding is limited…perhaps I’ve missed something really obvious??

Thanks for your help if you get chance to look!

Dave