My buttons expand to container width, how can I stop this and just wrap them around the text?

Question

My buttons keep expanding to container width. I want to make them normal, just wrapped around the text. The size depends on how long the text is. Does anyone know what I'm doing wrong?

Thanks!

.btn {
    display: inline-block;
    padding: 10px 30px;
    cursor: pointer;
    background: var(--orange-color);
    color: white;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

Answer 1

Most probably you have a width: 100% on your button in some part of your CSS file.
Or the containing element is a flex-container with flex-direction: column. This also may cause the button to stretch to the width of the container. (caused by the default align-items: stretch)

.btn {
    display: inline-block;
    padding: 10px 30px;
    cursor: pointer;
    background: var(--orange-color);
    color: white;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);

    width: max-content; /* pushes the width to be the size of the content */
    max-width: 100%; /* ensures the button doesn't overflow the container */
}