Kevin Powell - Community•3mo ago

Scale button on hover causes text in it to blur during transition

Hello everyone, i am trying to create an hover effect for a button where the button increases it's size. I noticed that this problem has some stack overflow solutions but none seemed to work on my end. I was wondering if anyone has had a similar problem and how they solved it. One work around i see is maintain the size of the text and increase only the size of the button. Here is the code i am using:

 <button class="form-button">Create account</button>

 <button class="form-button">Create account</button>

    .form-button{
        font-family: 'Times New Roman', Times, serif;
        width: 8rem;
        height: 2rem;
        background-color:#E4C5AF;
        margin: 0.5rem auto;
        border: 0;
        border-radius: 2px;
        cursor: pointer;
        transition: 0.3s;
        -webkit-font-smoothing: antialiased;
    }
    .form-button:hover{
        transform: scale(1.1);
        box-shadow: 0px 1px 4px rgba(99,61,33,42%);
    }

    .form-button{
        font-family: 'Times New Roman', Times, serif;
        width: 8rem;
        height: 2rem;
        background-color:#E4C5AF;
        margin: 0.5rem auto;
        border: 0;
        border-radius: 2px;
        cursor: pointer;
        transition: 0.3s;
        -webkit-font-smoothing: antialiased;
    }
    .form-button:hover{
        transform: scale(1.1);
        box-shadow: 0px 1px 4px rgba(99,61,33,42%);
    }

I added 3 pictures of the before, during and after transition, hopefully it helps. Thank you for the attention!

6 Replies

Melodium•3mo ago

well i think whenever we use some transform methods (scale, translate, etc) the text blurs out and i also think there's no solution for it (afaik)

Glaxy•3mo ago

That's unfortunate if it is not possible 😦

Melodium•3mo ago

uhh im not very good at css, so don't make a conclusion listening to my words

ChooKing•3mo ago

I still haven't witnessed this issue directly, and I had never heard of this problem until last month. Since then, I have seen 3 different people mention that they have this issue. Using their exact code, I was not able to reproduce it on any of my devices. It was actually surprising to me the first time I read about it, because TTF fonts are vector based and can scale infinitely. Bitmap fonts do exist, but it seems that this problem somehow is happening even with TTF fonts.

ChooKing•3mo ago

Are you using Windows? The last person who mentioned this issue was using Windows. I'm wondering if this is a bug introduced by Microsoft's attempt to fix antialiasing in Chrome. https://www.theverge.com/2024/3/25/24111273/microsoft-google-chrome-text-rendering-improvements

The Verge

Microsoft is making Chrome’s text rendering better on Windows

This isn’t the first time Microsoft has helped Google improve Chrome.

Glaxy•3mo ago

Yeah I use both windows and microsoft

Gaming

Programming

Scale button on hover causes text in it to blur during transition