Button with writing on top of the other

Asked

Viewed 43 times

1

I have this button, I’d like to add two words to it, but by displaying one on top of the other, I’ve tried one <br> between them but it’s like creating another button, I would like a button with the proportions that are there, but that one text was on top and the other bottom, I don’t know much css, anyone would know how to do? I’d like to let Finish up and Buy down

<button type="button" title="Finalizar Pedido" class="button btn-checkout btn-inline " 
        style="width: 93px; line-height: 50px; display: inline-block;"><span><span>Finalizar Compra</span></span></button>
css html5

1 answer

1


In this case the problem is that you put the line-height as 50px, then when you created a line break, the two lines would be 50px size, resulting in an element with 100px tall (50px for each line).

To solve this, just work with the padding instead of line-height. With the padding you control the spacing between the edges and the content of the element.

Below is your changed example:

<button type="button" title="Finalizar Pedido" class="button btn-checkout btn-inline " 
        style="width: 93px; display: inline-block; padding: 10px 0 10px 0;"><span><span>Finalizar Compra</span></span></button>

  • Thank you very much, that was it then, because I normally use the line-height.

  • I copied and pasted with the same properties as yours, but here the text pops off the button and leaves the area..

  • 1

    In this case it is probably because you are using a fixed width with a very large text. I suggest you put the <br> for the line break, remove the fixed width and put a padding also on the sides, so the button is dynamic adjusting to the content.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.