DEV Community

Cover image for Buttons With Animated Hover Effects using HTML & CSS only
Code League
Code League

Posted on

13 7

Buttons With Animated Hover Effects using HTML & CSS only

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

Let’s connect:
Instagram
Twitter

Top comments (3)

Collapse
 
marflage profile image
Marflage • • Edited

Can anybody explain why he added before pseudo class? Couldn't everything be done just with the hover pseudo class?

Collapse
 
codeleague7 profile image
Code League • • Edited

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. :)

Collapse
 
marflage profile image
Marflage •

Thank you so much. Yes, it did help.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay