HTML

How to style block buttons (full-width) with CSS?

The buttons are very common on the webpage. The buttons usually take up small space on the webpage. But sometimes we need to create a full-width button. There is no HTML attribute that will directly add a full-width button. We can create a full-width button with CSS.

In this tutorial, we will learn to create a full-width button with CSS.

Creating a full-width button

Creating a full-width button is very simple and easy, just take an element and make it a block element with display: block property and add width: 100% to it. You can use other CSS properties to customize it.

Example: Creating a full-width button with CSS

Here, we have shown you both full- width button and default button. For full- width button, we have used width:100% and display: block .

      button < background-color: blue; color: white; padding: 10px; >.full  
Default Button
 Submit 
Full-width Button
 Submit  

Output

Here is the output of the above example.

Example: Creating a full-width button with CSS

As we know that we can also create a button with element with type=»submit». The same CSS properties and be used with it too for creating a full-width button. Here is an example to show it.

Conclusion

In this tutorial, we have learned to create a block full-width button with CSS. To do so use display: block and width: 100% . This property can be used with element as well as element.

Источник

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

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;
>

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

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to Force a Button or Link to be 100% Width CSS Tutorial

These are instructions on how to make an HTML link or button expand to be as wide as its parent element. Maybe you have been confused in the past and that darn link just never wants to grow.

Here is the CSS you are going to want to apply to that link.

text-align : center ; /*This will result in centering the link text, which is probably what you want -brianjohnsondesign.com*/

And the corresponding HTML:

The secret here is that you need to use display:block; to actually force the button to grow to the full width. You also can’t really use left or right margins or padding, as they will just mess up the width and cause it to be off-center or larger than its container. Top or bottom margins or padding won’t cause any problems, however.

Keep in mind, as well, you need to make sure that the parent div or element of the link must be the width you are trying to force this button to be. Check and make sure it has a width!

Brian Johnson is a website developer and designer living in Minneapolis, Minnesota with a passion for code and WordPress. He spends his days building WordPress websites for small businesses, developing new code with the online community, and living life.

12 Comments on “How to Force a Button or Link to be 100% Width CSS Tutorial”

This doesn’t work if you want a margin on the side of your button. I found that you can work around this by using: width: calc(100% – 6em); where you set your subtraction distance (as in 6em above) along with your margins to give the appropriate appearance that you want.

Источник