Streaming live at 10am (PST)

How to make this hover animation


Hi, im try to make this “hover” interaction

but i tried a div block behind the text to imitate it but it is impossible for me.

Does anyone know how to do that?

thank you very much


This can be done with only CSS :hover.

So your element should be just a text, display block, with paddings left and right and the line-height defining the height of the block.

First select your element and go to Transitions. Add text color and box shadows.
Then select the hover state.
Then replicate the hover effect with inside box shadow, and text color
Go back to normal state and test your hover effect
You can set speed and ease in Transition for each property.


Cool, thank u. Vincent.


an example here:


Coool!! Thanks!! @FilipSipos :wink: