Button to 'grow' or expand on hover

Author Posts

jassheridan August 6, 2019 at 4:22 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

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 August 6, 2019 at 4:23 pm

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 August 6, 2019 at 7:27 pm

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 August 7, 2019 at 10:27 am

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 August 7, 2019 at 4:15 pm

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 August 7, 2019 at 4:33 pm

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 August 7, 2019 at 6:17 pm

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

You must login or register to reply to this topic.