How to create: Full-width (block-level) button

Learn how to use CSS to set the style of block-level (full-width) buttons.

How to set the style of block-level buttons

Step 1 - Add HTML:

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

Step 2 - Add CSS:

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

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

Try It Yourself

Related Pages

Tutorial:CSS Button