If you want to see which CSS styles get applied to an element (like a button on a website) at a given interactive state (active, hover, focus, etc.) you can use Chrome DevTools’ Element panel.
First, open DevTools, either by pressing
- cmd + shift + i on Mac / or ctrl + shift + i on Windows.
- Or right-click on the element which element states you want to trigger, and click on Inspect Element (see the video below).
Now select the UI element you want to change states on and go to the CSS panel and click on the :hov button to show the element state options.
If you want to see which styles get applied on hover (moving mouse over the element) tick the checkbox next to hover.
Video demonstration
Note: most websites only have styles for 1 or 2 states buttons, but if you test this on an anchor element (link) or a form, you’ll see that the :visited, :active and :focus states are often styled as well.
It can take some effort to design and style interactive UI elements well enough to make the user experience pleasant. I recommend looking at websites like Netflix and Airbnb to learn how to handle transitions and animation effects on interactive elements like a pro.
