ButtonsLesson 99Free preview
Outline Buttons
This lesson is part of How To · All levels
Summary
The outline button is a button with a transparent background and colored edge lines. This style is suitable for secondary action because it looks lighter than a full-featured button. When the cursor is directed, the background is usually colored and the text turns white to make the interaction clear.
Key points
- The outline button uses a transparent background and colored border.
- When hovered, the background is filled with color and the text color is adjusted to maintain contrast.
- This style is suitable for secondary action or alternative buttons.
- The border-radius and padding make the button shape convenient to use.
- Include a focus-visible so that keyboard users know which buttons are active.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.