CODEWITHSUNDEEP
htmlcssbuttontext
Terry
Terry

Reputation: 47

How can I prevent a button shrinking smaller than non-wrapping text using css?

Essentially I have a button with the word "Delete" inside.

It currently uses this css:

.btn-delete {
    font-size: 32px;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 15px;
    border-top: 0px;
    color: #fff;
    background: linear-gradient(to bottom, #ff0000, #d40000);
    vertical-align: middle;
    text-align: center;
}

It also uses col-xs-2 and col-xs-offset-3.

When I make the window smaller horizontally the background for the button will shrink and slowly cut away the "Delete" text until only part of the "D" is visible.

How would I prevent the button being able to cut off the font text? I would like the button to stop shrinking down before the text starts to get cut off.

Upvotes: 3

Views: 3666

Answers (1)

Lena Weber
Lena Weber

Reputation: 272

Yes, use min-width=xxx, and you should consider a min-height=xxx as well so the delete is readable. Set it to whatever pixel size works for the text.

Another option is to create a delete button image and specify its minimums as well. However, this is the more complex solution.

Upvotes: 4

Related Questions