multiple lines of text for a button

[magician11]

How would I create a button using

https://css-tricks.com/examples/ButtonMaker

where there are multiple lines of text?

e.g.

Free Delivery
on orders over $70

I’ve tried this code by inserting a <br/> but the button wraps.

[Senff]

Hm, weird, it’s working for me?
http://codepen.io/senff/pen/lhAeg

[magician11]

Thanks Senff!!

My bad, I was using the following HTML

<a href="" class="button">Free Delivery<br>on orders over $70</a>

I got directed to that page direct from Google.. and didn’t see any sample HTML on how to use it.

Other sites used <a>. Maybe a suggestion for someone to update that page to make it explicit?

[Senff]

Using should work too, but since that’s an inline element by default, you’ll have add some stuff: http://codepen.io/senff/pen/mafFe

[magician11]

Ah I see, thanks.

Setting <a> to have float: left; works well. Are there benefits in doing that over width: 160px; ? I guess, for one, you don’t have to work out the best width.. it just fits. Would floating <a> left also be the best for responsive designs?

Thanks Senff.

[Paulie_D]

Would floating left also be the best for responsive designs?

Sometimes yes, sometimes no. Perhaps you want all your links/buttons to be the same width, perhaps you don’t.

It depends on the the design you are going for.

Multiple floated list items / link buttons etc are a real hassle to centre on the pages sometimes but if that’s not an issue then it’s fine.

[Author]

Posts