ButtonsLesson 113Free preview

Block Buttons

This lesson is part of How To · All levels

Summary

A block button is a button that fills the entire width of its container and stands alone in one row. This style is made with a display: block and width: 100%. Block buttons are often used on forms, login pages, and mobile interfaces.

Key points

Display: block makes the button occupy the line itself.
Width: 100% makes the button fill the width of the container.
Box-sizing: border-box prevents padding from increasing the total width.
The vertical margin provides the distance between the stacked buttons.
Use the block button for the main action that you want to be easily reached.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.