Interactive Effects: Hover and Focus States
When you want your website to feel lively and responsive, interactive transitions play a key role.
The :hover and :focus pseudo-classes are essential tools for creating effects that respond to user actions. The :hover pseudo-class targets elements when a user points to them with a mouse or similar device, while :focus targets elements that are currently selected, such as an input field a user has clicked into or navigated to with the keyboard.
By combining these pseudo-classes with CSS transition, you can smoothly animate changes in stylesβlike color, border, or backgroundβwhenever users interact with your buttons, links, or form fields.
index.html
styles.css
In this example, both the input field and the button start with a neutral border and background. The transition property on each element sets up a smooth animation for border-color and background changes, lasting 0.3 seconds. When a user hovers over the input or button with the mouse, or focuses on them using the keyboard, the corresponding pseudo-class (:hover or :focus) matches the element. The browser then animates the border color and background to the new values defined in the hover and focus rules.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you show me a code example of how to use :hover and :focus with transitions?
What are some best practices for designing interactive transitions?
How do I make sure my transitions are accessible for all users?
Awesome!
Completion rate improved to 8.33Interactive Effects: Hover and Focus States
Swipe to show menu
When you want your website to feel lively and responsive, interactive transitions play a key role.
The :hover and :focus pseudo-classes are essential tools for creating effects that respond to user actions. The :hover pseudo-class targets elements when a user points to them with a mouse or similar device, while :focus targets elements that are currently selected, such as an input field a user has clicked into or navigated to with the keyboard.
By combining these pseudo-classes with CSS transition, you can smoothly animate changes in stylesβlike color, border, or backgroundβwhenever users interact with your buttons, links, or form fields.
index.html
styles.css
In this example, both the input field and the button start with a neutral border and background. The transition property on each element sets up a smooth animation for border-color and background changes, lasting 0.3 seconds. When a user hovers over the input or button with the mouse, or focuses on them using the keyboard, the corresponding pseudo-class (:hover or :focus) matches the element. The browser then animates the border color and background to the new values defined in the hover and focus rules.
Thanks for your feedback!
