Pseudo-classes style elements based on user interaction state, form validity, or link visit history.
1. Common Interactive Pseudo-Classes
⊞Code Example
.button {
background-color: #04AA6D;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.button:hover {
background-color: #039861;
}
.button:active {
transform: scale(0.97);
}
.button:focus-visible {
outline: 2px solid #00e676;
outline-offset: 2px;
}