Social Media Buttons with Cool Hover Animation using only HTML & CSS

Social Media Buttons with Cool Hover Animation using only HTML & CSS

Short Definition:
Social media buttons or links help your website visitors to easily share your web content with their preferred social media networks like Facebook, Twitter, Instagram, etc. With the bits of help of these buttons, you can expand the reach of your content to new and more viewers, and get new visitors back to your website.

Music Credit:
Levianth & Axol - Remember (feat. The Tech Thieves) [NCS Release]
Music provided by NoCopyrightSounds.

[CodingNepal]

If your icons aren't showing, replace the line no.7 script of index.html with this:

[raphaelmottelet]

I am a student in dev school, i can say its verry helpfull, i will try to understand your code before using it for projects. Thank you verry much, keep it up man !

Love from France.

[laurasilvajimenez]

exactly what i was looking for. thank uuuu!!

[stoby]

Awesome bro, have been looking for this type of social button

[twi]

Just want to say Thanks, Seen this type of concept first time. Really glad that I could find ur video.

[yashpanchal]

Thank you so much for this cool icons "buttons"

[niraj_raut]

Today I'm noticing a Nepali channel that's really awesome.
You are pro

[VikashXman]

This could be my best channel for chilling xD

[drunken-panda]

This is amazing! Keep up the great work!!

[mymilliondollorjourney]

Wow what a nice and awesome hover effect... Thanks..codeing Nepal broo

[iamhtmldeveloper]

Nice Creative Work... Thanks for your helpful video :)

[mirabbos]

awesome great work this is what i really wanted

[yntkns]

Thanks Man! its usefull for me for my school project lol, been searching for a good visual!

[KrampusPlays]

Literally worked And Amazing Technique :O

[stansfieldmalosa]

how can one build a school website with following website interface: home, staffs, students, about us, study with us, current affairs, campus life, research, library, eLearning, journals.if you any knowledge kindly assist

[clevercoderjoy]

in instagram icon when i hover it does not shows instagram written but when i put it outside of span tag it starts showing but with not styling

[boo]

Hi, Thank you for this video, im a beginner and have some questions as some strange things happened to my code 1/ After using float: left, the parent container "wrapper" collapsed with a 0 height.
2/ The finished product expands with the 200 px length, however the writing of "facebook, twitter etc" does not appear in it? Is it related to wrapper being 0px in height? What is the property that effects the "facebook, twitter etc" to enter the allocated space of 200px?
3/ Why did you have to keep writing display inline-block? does it not inherit this from the parents element, meaning you should only write it once in parent containers?

[mael]

Hello, if I change the icons by images, the span text is not vertically center after the hover effect. Do you know how to solve this problem ?

[deepthikorrapati]

my styles(CSS) is not working plz help me.i put all style but it doesn't work

[govines]

Bro please make a series of building your own css framework.