MenusLesson 53Free preview

Vertical Button Group

This lesson is part of How To · All levels

Summary

Vertical button groups stack related buttons from top to bottom, suitable for toolbars or narrow action menus. Each button usually fills the container width to make it look uniform. Just like a horizontal group, the double border is removed and the angle is only rounded at the top and bottom ends.

Key points

Flex-direction: the column makes the button be arranged vertically.
Width: 100% or the width of the container makes all buttons equal width.
Margin-top: -1px on the next button eliminates the double border.
The border-radius is applied to the first and last buttons only.
Text-align: left or center adjusted to interface style.

Full lesson

Code examples and quizzes

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