Creating a CSS Rollover Effect
Recently, I was working on a project where we had a specific rollover effect in mind. When you hover over the link, the background grows and when you roll off, it returns to its default state. In this video, I'll show you how to do this in CSS and the thought process that went into finding the best method.
0:00 Explanation of the Effect we're trying to achieve
1:06 Coding with text-decoration
3:05 Using border-bottom
4:13 Quick explanation of the box model
4:35 Using a ::before or ::after pseudo-element
8:36 Using box-shadow (the best solution)
🔗 LINKS
Codepen using text-decoration: https://codepen.io/ahaywood/pen/OJMOBay
Codepen using border-bottom: https://codepen.io/ahaywood/pen/MWKOzWQ
Codepen using a pseudo-element: https://codepen.io/ahaywood/pen/PoZOxPz
FINAL CODEPEN using box-shadow: https://codepen.io/ahaywood/pen/abdNwpo
👉🏻 Get Updates and Exclusive content at: http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com
