How TO - Full Width (Block) Buttons

❮ Previous Next ❯

Learn how to style block buttons (full-width) with CSS.

How To Style Block Buttons

Step 1) Add HTML:

Example

<button type="button" class="block">Block Button</button>

Step 2) Add CSS:

To create a full-width button, add a width of 100% and make it into a block element:

Example

.block {
  display: block;
  width: 100%;
  border: none;
background-color: #04AA6D;
padding: 14px 28px;
font-size: 16px;
  cursor: pointer;
  text-align: center;
}

Try it Yourself »

Go to our CSS Buttons Tutorial to learn more about how to style buttons.

❮ Previous Next ❯