ButtonsLesson 115Free preview

Round Buttons

This lesson is part of How To · All levels

Summary

A round button is a circular button, usually containing an icon or very short text. This shape is made with a border-radius: 50% and the same width and height. Round buttons are often used for control of media players, shutter buttons, and quick action.

Key points

Border-radius: 50% makes the angle of rotation complete.
The width and height must be the same for the result to be a circle, not an ellipse.
Flexbox makes it easy to center icons or text in the middle.
Keep the aria labels if the button only contains icons.
Make sure the click area is large enough and the contrast icon is adequate.

Full lesson

Code examples and quizzes

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