How to make text inside a button scale horizontally to page?

Question

enter image description hereText inside button is extending outside of the button. Is there anyways I can make the text scale based on the button/screen size? I already tried doing auto and searching youtube and google. Also used media query.

I already tried doing auto and searching youtube and google.

@media(min-width: 400px) {
    .purplebutton {
        min-width: 350px;
    }
    .buttontext {
        font-size: 16px;

    }
}
@media(min-width: 600px) {
    .purplebutton {
        min-width: 450px;
    }
    .buttontext {
        font-size: 17px;

    }
}

@media(min-width: 800px) {
    .purplebutton {
        min-width: 550px;

    }
    .buttontext {
        font-size: 20px;

    }
}

Expected result is the text to fit inside the button and size of font adjust according.

Actual result is the text extends outside the button

Answer 1

Instead of using absolute scaling units (px) for font-size use relative scaling font-size such as em, rem or vw.