how can I stop my text from getting blurred when getting bigger using the scale effect?

Question

I'm using the scale effect when my mouse is hovering over a button to increase the size, but whenever I hover over the button the text on the button gets blurred and I don't know how to fix it. someone else asked a similar question but the only answer was quite vague. note for my code snippet too make sense you need to expand the code snippet to see what I mean

/*html {
    background-size: cover;
}*/

body {
    padding: 50px;
}

button {
    transition: transform 0.5s;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 18px;
    cursor: pointer;
    height: 250px;
    width: 200px;
    border-style: none;
    outline-style: none;
    color: none;
    /*figure out how too stop text from blurring*/
}

div {
    padding: 90px;
    background-image: url(spiderman\ miles\ morales.jpg);
    background-size: cover;
}

button:hover {
    transform:scale(1.03,1.03);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<html>
    <head>
        <title>shop.shop</title>
        <link rel="stylesheet" href="shop.css">
    </head>
    <body>
        <button>
            <div>

            </div>
            the quick brown fox jumps over the lazy dog
        </button>
    </body>
</html>

Are you asking about while the element is scaling, the text appears to blur? Or after the scale effect is applied? — BlueLite, Apr 09 '20 at 08:22

score 0 · Answer 1 · answered Apr 09 '20 at 08:21

0

If you mean the blur while growing: No there is no way to get rid of that.

But if the text is blured after the "growanimation" as well when you open it in your browser: I dont have that problem when I open it in my browser...

answered Apr 09 '20 at 08:21

Whoozy

161
17

score 0 · Answer 2 · answered Apr 09 '20 at 08:30

Hope this will help you

/*html {
    background-size: cover;
}*/

body {
    padding: 50px;
}

button {
    transition: transform 0.5s;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 18px;
    cursor: pointer;
    height: 250px;
    width: 200px;
    border-style: none;
    outline-style: none;
    color: none;
    backface-visibility:hidden;
    /*figure out how too stop text from blurring*/
}

div {
    padding: 90px;
    background-image: url(spiderman\ miles\ morales.jpg);
    background-size: cover;
}

button:hover {
    transform:scale(1.03,1.03);
  backface-visibility:hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<html>
    <head>
        <title>shop.shop</title>
        <link rel="stylesheet" href="shop.css">
    </head>
    <body>
        <button>
            the quick brown fox jumps over the lazy dog
        </button>
    </body>
</html>

how can I stop my text from getting blurred when getting bigger using the scale effect?

2 Answers2