How to Create Button with Line Breaks

Buttons are generally created with the help of <button> or <input> tags.

While creating buttons, you may need to have a line break when your button has a long text.

Ways to Make a Line Break

The easiest way to have a line break is using the <br> tag on your text. It is used to insert a single line break.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Button with line break</h1>
    <button type="submit">My<br />Button</button>
  </body>
</html>

Another way of making a line break is using the CSS word-break property which specifies how words should break when reaching the end of a line. Put your button text in a <p> element and give styling to it. Use the keep-all value for the word-break property and set the width corresponding to your word lengths.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p { 
      width: 50px;
      padding: 0 20px; 
      margin: 0;
      word-break: keep-all;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Button with word-break</h1>
    <button type="submit">
      <p>My Button Example</p>
    </button>
  </body>
</html>

A different way to make a line break is using the flex-wrap property with its wrap value which defines that the flexible items will wrap where needed. Here also you need to set the width property for your button.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .btn { 
      display: flex;
      flex-wrap: wrap;
      width: 80px;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Button with flex-wrap</h1>
    <button class="btn" type="submit">My Button Example</button>
  </body>
</html>

Let’s see another example where additional styling and onclick attribute is added to our button.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .btn {
      display: inline-block;
      padding: 10px 25px;
      margin: 4px 2px;
      background-color: #1c87c9;
      border: 3px solid #095484;
      border-radius: 5px;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button class="btn" onclick="window.location.href = 'https://www.w3docs.com';" type="submit">Click<br />Me!</button>
  </body>
</html>

Do you find this helpful?

Related articles