MenusLesson 52Free preview

Button Group

This lesson is part of How To · All levels

Summary

The button group combines several related buttons into one smooth horizontal row. By removing the double distance and setting the angle only at the end of the group, the button looks like a complete control. This pattern is often used for display, filter, or group action selection.

Key points

Display: flex places the button in one row and facilitates the setting of the gap.
Margin-left: -1px on the next button eliminates the double border.
The border-radius is only given on the first and last buttons.
The .active class marks the option being used.
The z-index on the active button keeps the border visible above the other button.

Full lesson

Code examples and quizzes

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