Zoom button animation not smooth

[Lyser]

Hello,
As you can see here, the animation of the footer buttons (and all others in the site) are not smooth.
There is a zoom when you hover and when the zoom is full, the border of the button seems to re-form, same for the font where the height of it change roughly without being fluid.

Here’s the code i used for the class buttons :

 .boutonfoo {
 color:rgb(255, 255, 255, 1) !important;
 font-size:16px !important;
 padding: 15px 30px !important;
 background-color:#2b6399 !important;
 border:none;
 text-shadow:none !important;
 font-family:'oswald';
 text-transform:uppercase;
 border-radius:5px !important;
 transition: all 0.1s ease-out;
 }

 .boutonfoo:hover {
 color:rgb(0, 0, 0, 0.5); !important;
 background-color:#3274b3 !important;
 /*text-decoration:underline;*/
 transition: all 0.1s ease-out;
 transform: scale(1.05);
 }

Did i do something wrong ?

-edit
It seems to work fine with chrome, i see this problem with firefox

[rad]

Hi there,

Thanks for writing in.

The scale CSS will only increase the size of an element, but not all other CSS value. So if you wish to increase the border-radius upon hover, then you should multiply the original value with scale value.

Example,

.idle {
  border-radius:0.25em;
}
.idle:hover {
    border-radius: calc(0.25em * 1.05);
}

You may try it on other styling too.

Thanks!

[Lyser]

Thx the difference is nice !
But there is 2 things that have changed :

1. the zoom is not centered anymore, it goes to the bottom right (i tried a align center in the hover css but it didn’t work)
2. the zoom now push the others button down

You can see the différence before/after in the footer with the 2nd and 3rd column

[rad]

Hi there,

Don’t use calc(0.25em * 1.05); in your content’s font size. The size of your element is defined by its content, increasing it’s content size while increasing its container size through scale styling is redundant. It’s like double scale.

Thanks!

[Lyser]

The scale style is already off no ? (between /* */)

if i don’t use the calc(0.25em * 1.05); on the font-size, the button don’t zoom anymore.
Can you show me the correct code i have to use for the hover class button ?

[rad]

Hi there,

It should be like this,

.boutonfoo:hover {
    background-color: #3274b3 !important;
    transition: all 0.1s ease-out;
    transform: scale(1.05) !important; 
    border-radius: calc(5px * 1.05) !important;
}

You commented the transform which disables it.

Thanks!

[Lyser]

Put font-size:calc(16px * 1.05) instead of transform: scale(1.05) make font animation smoother.
(look for 3rd column footer for results)

Now do you have a idea why :

1. zoom is not centered anymore and
2. why zoom on first button make other button below move ?

[rad]

Hi there,

It moves because of the font size changes. That’s why you shouldn’t add font-size:calc(16px * 1.05). And don’t remove the transform: scale(1.05). Removing that disable the scaling of the entire element which makes it not centered because it only increases the content/font size. Could you try applying the recommended CSS first? Please don’t add font-size:calc(16px * 1.05)

Thanks!

[Lyser]

ok ok =)
I put the recommended css but there is no improvement, even the radius is not smooth anymore

[ruenel]

Hey There,

Please update your code and use this:

.boutonfoo {
    color: rgba(255, 255, 255, 1) !important;
    font-size: 16px !important;
    padding: 15px 30px !important;
    background-color: #2b6399 !important;
    border: none;
    text-shadow: none !important;
    font-family: 'oswald';
    text-transform: uppercase;
    border-radius: 5px !important;
    transition: all 0.25s ease-out;
}

.boutonfoo:hover {
    background-color: #3274b3 !important;
    transition: all 0.25s ease-out;
    transform: scale(1.15) !important;
    border-radius: calc(5px * 1.5) !important;
}

Hope this helps. Kindly let us know.