Social Media Buttons with Tooltip on Hover using only HTML & CSS

[@CodingNepal]

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

[@nnnnnnnin]

Why this video doesn't have a millions of views??

[@radhaarya9010]

This was new experience for me. Thank you from the bottom of my heart!

[@FastOnlineTutorials]

Succesfully video friend 😄😄😄

[@CodingNepal]

Thank you 💙😁... Stay tuned.

[@alanfan6652]

it is same for me too😍

[@CodingNepal]

Thank you 💙😁... Stay tuned.

[@alanfan6652]

@@CodingNepal of course. I already subscribed your channel 🤗

[@xenoragami]

the best channel ever for coding content !.

[@nikkobenosa9841]

This channel deserves better

[@CodingNepal]

My pleasure!

[@austineffiong3386]

this is lovely and helpful

You are a wizard of code!!!!!

[@krishmalshrestha2078]

Awesome bro.... Ajha bolldai tutorial banako vaye ta jhanai sunn maa sugandha nai hunnthyo.❣️

[@CodingNepal]

Umm bro.. Abw naya video ma voice add garnw parlaa.

[@hinata1066]

Thank you give me a new concept of animations, thanks again alot of love bro💝

[@ShyliKONE]

This video is awesome, but when write i dotn have the icon can you tell me why ?

[@tomu_sange]

Hello friend thanks for the blessings you give us through coding. Can you please make a video about website responsiveness on all devices.

[@kenthomas1109]

This is art! Holy smokes! (By the way, I usually hate music on code videos, but this track is amazing, as well.)

[@CodingNepal]

Thank you! Glad you enjoyed both the content and the music!

[@poornimasudha4806]

Where did you get the icons from? I need them please

[@gamesstar337]

One more thing is there a way I convert this whole file into one line of html code. Whenever I want to add this into my post, I just add that code.

[@sakshikumari-ec6in]

You make very great videos Itna detail mai koe bhi nii bataya hai

[@maximomedina3939]

THIS IS EPICALLY GOOD

[@CodingNepal]

Thank you 💙😁... Stay tuned.

[@amazingnature1466]

Video and song both are great !!! 🔥

[@suryaways-the_sun_rise]

Bro please make a video on sticky icons how it use and make different usages various sticky icons please make this video . Your doing the good job your code development is awesome

[@suryaways-the_sun_rise]

Please make video on sticky icons like what up , Facebook like this

[@CodingNepal]

Here is the video - kzbin.info/www/bejne/nmHCoGigr9OFja8

[@brunagomes6289]

Omg!!! So perfect 😍 Thanks!

[@CodingNepal]

You're welcome.. Stay tuned 😁

[@tmbanglastory33]

Your vedios is very helpful. Thank you bro

[@CodingNepal]

It's my pleasure

[@IlhomDadadjanov]

Good work. thanks!

[@gamesstar337]

Thanks for creating all these amazing tutorials. You are a professional blogger. Whenever you create this type of project then please tell then how we add this into our blog site.

[@CodingNepal]

Okk.. I'll make video on it.. Stay tuned 😁

[@scrollwithV18]

awesome bro, hats off

[@CodingNepal]

Thank you so much 😀

[@aadityamishra7734]

thank you bhai ,You are great'

[@Westerntales]

that's excellent

[@CodingNepal]

Thank you.. Stay tuned 😁

[@legitMeastro]

Thank you so much, this helped me alot

[@CodingNepal]

Glad it was helpful for you :)

[@cristianotero588]

Incredible, Thanks!!

[@futurecodingwithgirishwar7247]

Excellent video But How to make it appear when we click the social media icons??

[@yashsingadiya9850]

Thank you so much You have given code as well It makes work so easy

[@romuloalves9349]

Ótimo vídeo parabéns ✌.

[@rohanprasad2153]

Can you please tell me where you learn these programming languages.

[@CodingNepal]

From KZbin videos, blogs, and many free sites

[@Lerndemy]

Nepali honi! Awesome bro :)

[@CodingNepal]

Thank you bro 💙 😁

[@Hangoutapp]

Thanks codding Nepal. I got an recommended video. Can you make an view counter. Please

[@raye3807]

Thank you so much for this! :)

[@BloxianCode]

@CodingNepal I added an a href link to my buttons at the same as you told on the website, but the icons are blue now. I checked your website, there was the same question, but the solution you gave their didn't work for me. You said to add this to css = .wrapper .icon span i{color: #fff}; Unfortunately that turns the whole icon white so you can only see the icon when you hover it, then it shows normal. Do you know a potential fix for this? Thanks!

[@ahmadtariq8781]

I think u have to go to css and change span to a

[@ahmadtariq8781]

How did u get the buttons to work with links?

[@haseeburrehman4212]

thank you so much bro

[@sethiappleorchards7176]

You are awesome brother

[@CodingNepal]

Thank you bro.. Stay tuned 😁

[@aditya._.official]

Love You bro 👍👍

[@CodingNepal]

Thanks bro.. Stay tuned 😁

[@aditya._.official]

@@CodingNepal ❤️❤️

[@aditya._.official]

Bhai whole website par videos banao ek

[@aditya._.official]

Mujhe intjaar hai please ☑️

[@mohammed6yziad664]

thank you to Social Media Buttons with Tooltip on Hover using

[@CodingNepal]

You're welcome... Stay tuned 😁

[@mohammed6yziad664]

Olive you

[@mohammed6yziad664]

Sorry I love you

[@mohammed6yziad664]

@@CodingNepal I love you

[@CodingNepal]

Oh wow I also love me!

[@user-lk4ll4lx7d]

how to add social links to the social icons to made those clickable

[@poppyelfin5323]

website adblocker is faulty and alerting even when i disabled all extensions and tried incognito :(((

[@poornimasudha4806]

Should we download the images? like facebook and instagram etc.

[@CodingNepal]

These aren't images.. These are icons... Please watch full video for further info.

[@Димитър-ж7щ]

Very nice !

[@akashgupta8203]

Hey bro! This is superb! I'm facing problem with where to insert the links as I do not know anything about coding! 😅 Can you please elaborate on where do I place the tag? 😄

[@CodingNepal]

If you don't know then don't worry I'll do for you just contact me on Instagram.

[@CodingNepal]

You can also easily to this... Just change the span tag with anchor tag like it's tag and you've to change it into and also remember to change tag name in css file too.

[@akashgupta8203]

@@CodingNepal okay.. Thank you! :)

[@ayushchaudhari4290]

Real professional

[@imadragongaming]

Awesome 👍

[@CodingNepal]

Thank you so much

[@muskansoni8362]

Why did you give flex direction column?

[@creativeminds5222]

can we just type span{} instead of .wrapper .icon span{}

[@CodingNepal]

Yes but it'll select all spans outside .icon and .wrapper if there you used span

[@rushikeshmanwar1999]

That's amazing

[@CodingNepal]

Thank you.. Stay tuned 😁

[@Momdenkaifi]

Thanks bro

[@creativeminds5222]

why you made span position to relative?

[@CodingNepal]

Because I gave children to position absolute

[@reacticity]

Is this possible with tailwind css?

[@90sClubAnime]

did you use bootstrap ??

[@CodingNepal]

No it's pure css

[@90sClubAnime]

@@CodingNepal please do you have any course about css ? in udemy or any other platform ?

[@Afroz6342]

how can we add that green ripple effect on mouse click,can you share that video?

[@soukainacharef8411]

Niice

[@CodingNepal]

You're welcome 💙

[@royalhacker5808]

You are so nice

[@ShadowGaming20945]

Hay forma de hacerlo adaptable a otros dispositivos?

[@shivakrishnan6354]

how to change the position of this to our wish..plx help me out...

[@adamemir1509]

how do i add hyperlink without changing the color?

[@CodingNepal]

Email me here [e-mail] and I'll send code for you.

[@abdulrahman2k18]

Awesome

[@royalhacker5808]

Please aap slideshow image kea sath menu bar banao for phone view

[@AmettZiyach]

Please slow write the code to understand thank you 💯💚

[@CodingNepal]

OK I'll improve it.. Stay tuned 😁

[@abdulrazak7518]

I was doing this just now but then the logo was missing and it says "Not allow when Origin Missing". How to fix this?

[@Furanzee]

How do I fix the icon turn blue instead of black please reply

[@CodingNepal]

In the css file add this a{color: #333;}

[@srilankann5947]

Your tutorial really super How to Generate Barcode

[@CodingNepal]

I'll make video... Stay tuned 😁

[@srilankann5947]

@@CodingNepal thanks

[@AbdulRahman-cm9wi]

where did you get kit frontawsome website or can you me link

[@movieflick321]

Plz make wave of water 🥰

[@Gometaysaigon]

nice

[@haltsling]

How do I make it that, when I press the buttons, it brings me to another website.

[@rosiekf8381]

You are so fast bro But good job 👍

[@creativeminds5222]

what -70px mean?

[@CodingNepal]

To move element -70px

[@muhammadanis9861]

Bro can you tell me the import link which you added on style.css

[@MCFunGaming]

Hey bro how you preview page in vs code

[@seemesarkar2260]

💻🅶🅾🅳 𝕭𝖑𝖊𝖘𝖘 𝖄𝖔𝖚💻

[@CodingNepal]

Thank you 💙😁... Stay tuned.

[@alienpcmxforever3892]

Friend, could you help me to Make this social icon bar responsive and see it on all My devices

[@apindev4726]

Music menit 1:00 ? Thanks

[@apindev4726]

Up

[@CodingNepal]

I didn't understand

[@parthgupta4850]

greAt!

[@CodingNepal]

Thank you.. Stay tuned 😁

[@parthgupta4850]

@@CodingNepal always

[@adityareddy9109]

8:02

[@ahcenekbl]

how do you add links to it please

[@CodingNepal]

It's simple.. Add tag inside each div.. If you don't know how then you can contact me on Instagram and I'll send the codes of it.

[@itsareeshaay1583]

Css ki file m 1st link kis cheez ka h?

[@CodingNepal]

Oh Google font ko import kiya he... Meh kal iska source codes mere website pe provide kardunga.

[@itsareeshaay1583]

@@CodingNepal OK

[@nissshantofficial282]

I have done this but F ko mathi facebook aauni ma tei aautai f lekhko mai joderw aau6 ani mathi aauni sattoo ma kata mistake bako hola?

[@Arjun-kamat]

can you recreate this video please using display flex

[@clickbatemotivation3260]

went a step further and added links to the icons

[@parthsharma2921]

need help!!! HOW TO CHANGE THE POSITION OF THIS WHOLE TO BOTTOM RIGHT OF MY WEB PAGE @CodingNepal

[@CodingNepal]

position: absolute; bottom: 0px; right: 0px;

[@parthsharma2921]

*Thnx bro*

[@OPEL0413]

Its not working beacuse if i open the html file it wont load the css

[@muhammadhassan-yb9mn]

YR YE COLOR KESEY CHANGE HOGA ICONS KA

[@technobsgl6744]

how to add our social media links to it

[@CodingNepal]

Just add tag inside each div and insert your social network link inside href attribute of tag. Like this

[@shobithmallya4355]

@@CodingNepal hey man. I just tried the same, but both the icons and text becomes a hyperlink and turns purple. And the alignment also changes. Any suggestions for it?

[@CodingNepal]

Yes I've styled the span tag.. Just replace span with tag and change tag name in css codes too.

[@shobithmallya4355]

@@CodingNepal Yes, I did the same. All the icons are becoming purple.

[@shobithmallya4355]

Oh yes, got it. I added text-decoration: none; and color: inherit; Now it works. Thanks a lot.

[@haseeburrehman4212]

save my 3 to 5 hour Thanks

[@Urdu_Insights_TV]

can you share the code of this awesome video

[@CodingNepal]

You can copy or download codes from here www.codingnepalweb.com/social-media-buttons-with-tooltip-on-hover/

[@Urdu_Insights_TV]

@@CodingNepal bro it is not responsive

[@MorgansAntics]

When I remove the "i" from line 45 at 7m58s: .wrapper .icon:hover span{ color #fff; } My icons don't turn white on hover, and the colors I later put in for the other icons stay as Facebook blue. It's driving me crazy! :D Any tips?

[@MorgansAntics]

I've checked the code in CodePen so many times, and can't seem to see where I'm going wrong...

[@CodingNepal]

I've coded for I tag so when you removed it.. The codes for this tag are not used. So if you don't know about it then don't remove it.

[@MorgansAntics]

@@CodingNepal Totally my fault, it was an HTML, not a CSS error :D Great widget, thanks!!

[@md.hafijurrahman4461]

Please slow write the code to understand thank you

[@CodingNepal]

Thanks for your suggestion and I'll improve it.

[@vinitsharma3925]

Where is code

[@Octo-BoY]

Sir,,,its not device responsive .....Can you make it.....?

[@Octo-BoY]

Sir,, could you please help me to make it device responsive

[@raulortegagonzales]

genio

[@jugalsharma6114]

Bhai music ka nam kya ha

[@CodingNepal]

Check description.

[@jugalsharma6114]

Bhai your are 😊👏👏👏👍👍

[@CodingNepal]

Thank you bro 💙😁

[@miguelferrarotti5076]

This video is not a boom between us because they want to monetize everything!!!!

[@yoho8408]

❤️❤️❤️❤️❤️❤️

[@sayalipathak9468]

Ure used script means ure ued the js I am right na

[@acidnitrogaming6625]

Can you please give me the source code of the program bro

[@CodingNepal]

You can download it from here - www.codingnepalweb.com/social-media-buttons-with-tooltip-on-hover/