Hover state for button element – transition not working

Tagged: , ,

Author Posts

majorpayne February 7, 2019 at 6:43 pm

I’m confused; in this video at about 2:46 he adds a width value, increasing the size of the button. Transition is also added to give the effect on hover. But when I try to duplicate this, no transition occurs, I just get a ‘snap’ to the new width. However if I use Padding & Margins > padding right+left=30px, I can see the transition ease the width larger.

Why can’t I duplicate how this is applied in the video? Also, I’m stumped why he added a “slideup” animation, for no apparent reason – it won’t show on hover, so what was the point?

Anyways, full disclosure, I tried all of this on a remote (now deleted) and local server.

Sebastian February 8, 2019 at 11:11 am

Hey,

Sorry for the confusion. In answer to your questions:

Transiting the width
In order for the browser to transition width values the initial width can’t be auto. It needs to be a specifically defined width e.g. 200px. This can be annoying because it’s often desirable to allow an element’s width to adapt to the size of the content inside it. As is the case with buttons, where the length of the text often determines the width of the button. Having width set to auto is necessary for this to happen.

So how to you transition the width of a button? You use min-width. It’s safe to set min-width to 0 (a specifically defined number) for pretty much all elements. And this will still allow the actual width to be flexible. Then, when you set the transition property, you set the min-width to be larger than the current width of the button. That way it will smoothly transition to the wider width rather than snapping to it instantly.

In the video, I use the min-width property without actually mentioning the ‘min‘ bit. My bad. And I don’t set the initial min-width to zero, but the important point here is that I set it to something.

The point of the animation
I didn’t set a specific event for the animation. So by default, the button would slide up when the page first loads. I was working on a simple page, so the animation would be visible to the user when the page first loads. But often a button will be out of view initially, only coming into view when the users scrolls down the page a bit. To handle this situation, it’s best to set the animation event as ‘inView once’. That way, the animation starts only when it will be seen by the user.

Does this make sense?

Cheers,
Sebastian

majorpayne February 8, 2019 at 3:08 pm

So you’re that guy in the video – kewl! Really wish you did more of them tho.

Ok, your explanation ‘fixed’ the problem I was having. Followed it and now the effect works, thanks! And I appreciate the bounce animation explanation. Now it makes sense.

Getting a bit off my original topic, just want to mention I’m using Oxygen . MT is a great Website building asset, and it couldn’t hurt if you popped into their Facebook group and promoted it with a “Hey I’m Sebastian from Microthemer!”

You must login or register to reply to this topic.