How TO - Full Width (Block) Buttons


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.


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.