The size of the image is too big for the button... Any tips?

Question

BEFORE AFTER! the light gray is the button. I have this css for my html button:

.link-container button {
    background-color: #444;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    background-image: url(imgs/openbutton.png);
}

this is the html code for the button: <button onclick="window.location.href='https://example.com/link2';"></button>

the main problem is, its too big.

I have searched online for solutions, havent found anything, and I was kind expecting for it to shrink and fit...

Answer 1

Try, below CSS code ...

.link-container button {
    background-color: #444;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    background-image: url('imgs/openbutton.png');
    background-size: contain; /* Makes the image fit within the button */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center; /* Centers the image within the button */
}