Button to 'grow' or expand on hover

This topic contains 6 replies, has 2 voices, and was last updated by  jassheridan 2 weeks ago.

Author Posts

jassheridan

Hi Sebastian,

I’m looking to have a hover effect where a button will grow, expand or puff out on hover. Where would I start to look for effect please?
Thanks


jassheridan

BTW i’ve got it working with adding some padding on hover, but I’m wondering if there is a better way?

Thanks again


Sebastian

Hey,

You could use transform instead. Microthemer doesn’t have transform UI fields yet, but you could add the following style to the hover selector:

transform: scale(1.1);

You may also want to set transition on the non-hover selector:

transition: transform .5s;

Cheers,
Sebastian


jassheridan

Thank you… I’m trying to follow this

https://screencast-o-matic.com/watch/cFenobDjft

but perhaps I’m doing something stupid… Could you please be a little more specific in exact instructions.

Thanks millions


Sebastian

Ah, following that video should give you the effect you want. If it’s not working, it might be due to other CSS styles you’ve added via Microthemer…

If you can send me a link to the page you’re working on I should be able to explain what you need to do differently.

Thanks,
Sebastian


Sebastian

Thanks for sending access.

You were using a colon (:) instead of a dot (.). To fix, please change this:

scale(1:5)

To this:

scale(1.5)

Cheers!
Sebastian


jassheridan

Thank you Sebastian – amazing support as usual. Hope this helps someone else

You must login or register to reply to this topic.