ButtonsLesson 102Free preview
Fading Buttons
This lesson is part of How To · All levels
Summary
A fading button is a button whose transparency level changes as the cursor approaches or moves away. These effects are created with the properties of opacity and transition, so that the changes look smooth. Fading is useful for subtle feedback, but important status still needs to be conveyed through clear text or attributes.
Key points
- The opacity property regulates the permeability of the element.
- Transition: opacity makes the transition of transparency smooth.
- Opacity 1 means fully visible, whereas 0 means invisible.
- The button with the opacity 0 is still in the DOM and can still receive clicks.
- Provide enough focus-visible and contrast text to remain accessible.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.