In this Tutorial, we'll build Buttons With Animated Hover Effects UI Design using HTML & CSS only. This Project-based Tutorial is suitable for all especially Beginners.
📕 Image download link: https://drive.google.com/drive/folders/1txh7ZCKt6bVtdA7VwyNYQI7A8JTLtUYk?usp=sharing
🧠 Concepts covered in this video:
- Flexbox
- CSS transitions
- Transforms
- Modern Web Design
If you are interested in more real-world project-based tutorials then consider checking out the Code League Youtube channel and inspire the tech industry.
Share this video with a friend
Top comments (3)
Can anybody explain why he added before pseudo class? Couldn't everything be done just with the hover pseudo class?
In order to create that animated green background effect, we need to use the before pseudo element to insert the code before HTML elements. Now the reason that you don't see the green background initially is that it is hidden with the help of overflow: hidden property in the anchor element (line no. 23). Just remove this line to visually see what I actually mean. So basically the green background should be present already on the page and the hover effect just allows it to be visible. Hope that helps. :)
Thank you so much. Yes, it did help.