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: #4CAF50;
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.
