Button with Wrapping Text Have Large Line-Height


#1

I have an issue with the default button wrapping. I find that it has much too much space between wrapped lines. Before I delve into fixing it with custom CSS, I’m just wondering if this is a common issue and if there’s a reasonable fix.

Here’s a screenshot showing what I mean:

Cheers,
Ted


#2

As a note, I’ve added the following to my style.css to address the issue for now:

.button {
    line-height: 1.5em;
}


#3

Add a

anchor to button caption.

  <button class="button button-block button-light"  >
                   <p class="button-pagraph">caption here</p>
              </button>

.button-pagraph {
line-height: 1.5em;
}