How to fix Hover css effect tremble/shaking?

[fwntly]

I'm experiencing a shaking effect when hovering over buttons-links on my website. When I hover over the buttons, they shake instead of smoothly transitioning. Here's the CSS code

header .buttons{
    margin: 7px 20px;
    transition: 0.5s;
}

header .buttons:hover{
    transform: scale(1.1);
}

header .buttons a{
    color: #ffffff;
    text-decoration: none;
    font-size: 32px;
    position: relative;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #5e8c87;
    transition: 0.5s;
    padding: 7px 7px;
    border-style: solid;
    border-color: whitesmoke;
}

header .buttons a:hover {
    letter-spacing: 0.15em;
    background: var(--clr);
    border-color: var(--clr);
    box-shadow: 0 0 35px var(--clr);
}

the same happens when hovering the mouse over the logo, which is a link to the main page of the site:

header .logo a{
    background-image: url("logo.png");
    background-size: 180px;
    background-repeat: no-repeat;
    position: relative;
    width:180px;
    height: 180px;
    display: inline-block;
    text-indent: -9999999px;
    border-radius: 50%;
    transition: 0.3s;
}

header .logo a:hover {
    transform: scale(1.05);
    letter-spacing: 0.15em;
    box-shadow: 0 0 15px var(--clr);
}

 

[Malcolm]

Hello @fwntly 👋

I tried replicating your issue but did not see the same shaking as described. If I may ask, what browser are you using?

 

[rene7705]

it's usually a CSS z-indexing problem..

 

[rene7705]

i could replicate the issue at https://codepen.io/rene-veerman/pen/NWJgrMv ; when i hover the mouse over the animated edge in certain x-pos zones, the animated div "gets confused" and starts flickering because the ".someClassName:hover" starts conflicting with ".someClassName".. don't quite have an answer as to how to solve this yet, but i'll give it a shot tonight..

 

[rene7705]

a little bit of googling found a realistic claim to a fix, at Hover state flickers rapidly when mouse is on edge of element

 

[Malcolm]

i could replicate the issue at https://codepen.io/rene-veerman/pen/NWJgrMv ; when i hover the mouse over the animated edge in certain x-pos zones, the animated div "gets confused" and starts flickering because the ".someClassName:hover" starts conflicting with ".someClassName".. don't quite have an answer as to how to solve this yet, but i'll give it a shot tonight..

Ah, thanks for sharing that! It ended up being that I did my buttons a bit differently which was why I wasn't able to replicate it. But after changing the buttons to the same style as yours I got the same thing.

 

[Malcolm]

I believe you can also fix this by adjusting the transform: scale(1.1) to transform: scale(1.0) under header .buttons:hover. I tried the change on my machine, and it fixed the issue; I also tested it in the codepen that @rene7705 shared, and it fixed the problem there.