[Support request] How to add second line in the button with smaller text size

Home Forums Support [Support request] How to add second line in the button with smaller text size

Home Forums Support How to add second line in the button with smaller text size

  • This topic has 1 reply, 2 voices, and was last updated 2 months ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2006657
    Karsten

    Hey friends,

    I am using this blue buttons on my landing pae and now I want to add a second line in the button with smaller text size. How could I achieve this? Thank you for your help.

    Karsten

    #2006776
    David
    Staff
    Customer Support

    Hi there,

    there isn’t an option in the block editor for this.
    You would need to use HTML to create the Button eg.

    <a class="button two-line-button" href="the_url">The first line of text<span>The second line</span></a>

    We can the add some styles to that button:

    /* Button style */
    a.two-line-button {
        background-color: #0366d6;
        color: #fff;
        padding: 15px 20px;
        display: block;
        text-align: center;
    }
    a.two-line-button:hover {
        background-color: #222;
    }
    /* Second line style */
    a.two-line-button span {
        display: block;
        font-size: 12px;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.