CSS Magic Line Icon Fill Hover Effects | Social Media Buttons

Enroll My Course : Next Level CSS Animation and Hover Effects

Another Course : Build Complete Real World Responsive Websites from Scratch
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
------------------

------------------
------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

[lucassXDDD]

If you want to make the icon clickable after transition my faster solution is just add a (pointer-events: none;) on all (ul li:nth-child(x)::before). Don't know if it could break something else but in this particular case everything else keeps working as intended.

[kirank]

You have passion and persistence I really Adore that!

[vuchke]

For all who are wondering how to make it clickable after animation.
make a pseudo-element on a link ( a::before ) and not on li like in video...
as for icon changing u have to do something like this " li:nth-child(1) a::before "

and last but not least, have a great day :)

[aryansoji]

You are the only creative website developer in India

[logusr]

You always rocking... really you are the only person who play with css

[AdeyCoder]

cool animation and hovering effect 👍🏼👍🏼👋🏼

[ayush.kumar.]

icons are not completely overlapping for me, i could see the other icon behind the colored when hovering over it. Did you face the same problem?

[rajdeepmajumder]

Now if i want to embed social media links on the icons ...like clicking on it will redirect then should i provide my profile link in href?

[luissevilla]

Hi it’s awesome, I had a problem why mi icons when I do hover, display in a different position I put top:0 left:0 but still the hovered Icon apper wrongly (under)

[alifmahmud]

You are awesome 😍😍.
All of your ideas are great..

[aryansoji]

Hey I have given my laptop and computer for repairing and when it will be repaired and when I will get it back I want be late

[kirubatamilselvan]

Is it only applicable for black screen? Is it ok to use white screen

[jonesy_b]

well it works but instead of collering the icon it draws '/f099' over it how is this possible? and the line is not scaling properly

[hxn]

Can someone tell in with language was create this I want try it

[snehalghodajkar]

The icons from that sites are not appearing in our HTML page when we load...can anyone tell me how to resolve this issue??? It's just about the icons 😢😢

[Ken-S]

Interesting. I thought it could only use SVG mask for this animation.