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.