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

Поделиться
HTML-код
  • Опубликовано: 30 ноя 2024

Комментарии • 188

  • @CodingNepal
    @CodingNepal  4 года назад +15

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

  • @nnnnnnnin
    @nnnnnnnin Год назад +2

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

  • @FastOnlineTutorials
    @FastOnlineTutorials 4 года назад +11

    Succesfully video friend 😄😄😄

    • @CodingNepal
      @CodingNepal  4 года назад

      Thank you 💙😁... Stay tuned.

    • @alanfan6652
      @alanfan6652 4 года назад +3

      it is same for me too😍

    • @CodingNepal
      @CodingNepal  4 года назад +2

      Thank you 💙😁... Stay tuned.

    • @alanfan6652
      @alanfan6652 4 года назад

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

  • @ShyliKONE
    @ShyliKONE Год назад +1

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

  • @xenoragami
    @xenoragami 2 года назад +1

    the best channel ever for coding content !.

  • @radhaarya9010
    @radhaarya9010 2 года назад +2

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

  • @krishmalshrestha2078
    @krishmalshrestha2078 4 года назад +1

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

    • @CodingNepal
      @CodingNepal  4 года назад +1

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

  •  2 года назад +1

    You are a wizard of code!!!!!

  • @tomu_sange
    @tomu_sange 3 года назад +3

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

  • @nikkobenosa9841
    @nikkobenosa9841 3 года назад +4

    This channel deserves better

  • @poornimasudha4806
    @poornimasudha4806 4 года назад +5

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

  • @gamesstar337
    @gamesstar337 4 года назад +5

    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.

  • @maximomedina3939
    @maximomedina3939 4 года назад +3

    THIS IS EPICALLY GOOD

    • @CodingNepal
      @CodingNepal  4 года назад

      Thank you 💙😁... Stay tuned.

  • @hinata1066
    @hinata1066 Год назад +1

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

  • @sakshikumari-ec6in
    @sakshikumari-ec6in 2 года назад

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

  • @gamesstar337
    @gamesstar337 4 года назад +3

    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
      @CodingNepal  4 года назад +2

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

  • @kenthomas1109
    @kenthomas1109 5 месяцев назад

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

    • @CodingNepal
      @CodingNepal  5 месяцев назад

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

  • @austineffiong3386
    @austineffiong3386 4 месяца назад

    this is lovely and helpful

  • @brunagomes6289
    @brunagomes6289 4 года назад +3

    Omg!!! So perfect 😍
    Thanks!

    • @CodingNepal
      @CodingNepal  4 года назад +1

      You're welcome.. Stay tuned 😁

  • @tmbanglastory33
    @tmbanglastory33 3 года назад +1

    Your vedios is very helpful.
    Thank you bro

  • @suryaways-the_sun_rise
    @suryaways-the_sun_rise 4 года назад +2

    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
      @suryaways-the_sun_rise 4 года назад +1

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

    • @CodingNepal
      @CodingNepal  4 года назад

      Here is the video - ruclips.net/video/h0_o5jznRWM/видео.html

  • @romuloalves9349
    @romuloalves9349 4 года назад +7

    Ótimo vídeo parabéns ✌.

  • @futurecodingwithgirishwar7247
    @futurecodingwithgirishwar7247 3 года назад +2

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

  • @poppyelfin5323
    @poppyelfin5323 Год назад +1

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

  • @rohanprasad2153
    @rohanprasad2153 3 года назад +3

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

    • @CodingNepal
      @CodingNepal  3 года назад +2

      From RUclips videos, blogs, and many free sites

  • @BloxianCode
    @BloxianCode 2 года назад +1

    @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
      @ahmadtariq8781 2 года назад

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

    • @ahmadtariq8781
      @ahmadtariq8781 2 года назад

      How did u get the buttons to work with links?

  • @Lerndemy
    @Lerndemy 4 года назад +2

    Nepali honi! Awesome bro :)

  • @amazingnature1466
    @amazingnature1466 Год назад

    Video and song both are great !!! 🔥

  • @Hangoutapp
    @Hangoutapp 3 года назад +1

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

  • @Westerntales
    @Westerntales 4 года назад +6

    that's excellent

  • @akashgupta8203
    @akashgupta8203 4 года назад +2

    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
      @CodingNepal  4 года назад +1

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

    • @CodingNepal
      @CodingNepal  4 года назад +1

      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
      @akashgupta8203 4 года назад +1

      @@CodingNepal okay.. Thank you! :)

  • @scrollwithV18
    @scrollwithV18 3 года назад +1

    awesome bro, hats off

  • @IlhomDadadjanov
    @IlhomDadadjanov 3 года назад +1

    Good work. thanks!

  • @user-lk4ll4lx7d
    @user-lk4ll4lx7d 2 года назад +1

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

  • @legitMeastro
    @legitMeastro 3 года назад +1

    Thank you so much, this helped me alot

    • @CodingNepal
      @CodingNepal  3 года назад

      Glad it was helpful for you :)

  • @mohammed6yziad664
    @mohammed6yziad664 4 года назад +1

    thank you to Social Media Buttons with Tooltip on Hover using

  • @yashsingadiya9850
    @yashsingadiya9850 Год назад

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

  • @aadityamishra7734
    @aadityamishra7734 Год назад

    thank you bhai ,You are great'

  • @cristianotero588
    @cristianotero588 2 года назад

    Incredible, Thanks!!

  • @aditya._.official
    @aditya._.official 4 года назад +2

    Love You bro 👍👍

  • @poornimasudha4806
    @poornimasudha4806 4 года назад +1

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

    • @CodingNepal
      @CodingNepal  4 года назад +1

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

  • @sethiappleorchards7176
    @sethiappleorchards7176 4 года назад

    You are awesome brother

    • @CodingNepal
      @CodingNepal  4 года назад

      Thank you bro.. Stay tuned 😁

  • @creativeminds5222
    @creativeminds5222 3 года назад +1

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

    • @CodingNepal
      @CodingNepal  3 года назад

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

  • @royalhacker5808
    @royalhacker5808 3 года назад +1

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

  • @muskansoni8362
    @muskansoni8362 2 года назад

    Why did you give flex direction column?

  • @ayushchaudhari4290
    @ayushchaudhari4290 2 года назад

    Real professional

  • @Afroz6342
    @Afroz6342 3 года назад

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

  • @raye3807
    @raye3807 2 года назад

    Thank you so much for this! :)

  • @imadragongaming
    @imadragongaming 3 года назад +1

    Awesome 👍

  • @creativeminds5222
    @creativeminds5222 3 года назад +1

    why you made span position to relative?

    • @CodingNepal
      @CodingNepal  3 года назад

      Because I gave children to position absolute

  • @shivakrishnan6354
    @shivakrishnan6354 2 года назад

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

  • @Димитър-ж7щ
    @Димитър-ж7щ 2 года назад

    Very nice !

  • @AbdulRahman-cm9wi
    @AbdulRahman-cm9wi 3 года назад

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

  • @reacticity
    @reacticity Год назад

    Is this possible with tailwind css?

  • @rushikeshmanwar1999
    @rushikeshmanwar1999 4 года назад +2

    That's amazing

  • @90sClubAnime
    @90sClubAnime 3 года назад +1

    did you use bootstrap ??

    • @CodingNepal
      @CodingNepal  3 года назад +1

      No it's pure css

    • @90sClubAnime
      @90sClubAnime 3 года назад

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

  • @haltsling
    @haltsling Год назад

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

  • @haseeburrehman4212
    @haseeburrehman4212 Год назад

    thank you so much bro

  • @abdulrazak7518
    @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?

  • @nissshantofficial282
    @nissshantofficial282 3 года назад

    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?

  • @alienpcmxforever3892
    @alienpcmxforever3892 2 года назад

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

  • @ShadowGaming20945
    @ShadowGaming20945 2 года назад

    Hay forma de hacerlo adaptable a otros dispositivos?

  • @srilankann5947
    @srilankann5947 4 года назад +1

    Your tutorial really super
    How to Generate Barcode

  • @Arjun-kamat
    @Arjun-kamat 2 месяца назад

    can you recreate this video please using display flex

  • @adamemir1509
    @adamemir1509 3 года назад +1

    how do i add hyperlink without changing the color?

    • @CodingNepal
      @CodingNepal  3 года назад

      Email me here codingnepalweb@gmail.com and I'll send code for you.

  • @Furanzee
    @Furanzee 3 года назад +1

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

    • @CodingNepal
      @CodingNepal  3 года назад

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

  • @parthsharma2921
    @parthsharma2921 4 года назад +1

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

  • @AmettZiyach
    @AmettZiyach 4 года назад +2

    Please slow write the code to understand thank you 💯💚

    • @CodingNepal
      @CodingNepal  4 года назад +1

      OK I'll improve it.. Stay tuned 😁

  • @muhammadanis9861
    @muhammadanis9861 2 года назад

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

  • @soukainacharef8411
    @soukainacharef8411 3 года назад +1

    Niice

  • @Momdenkaifi
    @Momdenkaifi Год назад

    Thanks bro

  • @MCFunGaming
    @MCFunGaming 2 года назад

    Hey bro how you preview page in vs code

  • @royalhacker5808
    @royalhacker5808 3 года назад +1

    You are so nice

  • @AbdulRahman-xl9jh
    @AbdulRahman-xl9jh 3 года назад

    Awesome

  • @muhammadhassan-yb9mn
    @muhammadhassan-yb9mn 10 месяцев назад

    YR YE COLOR KESEY CHANGE HOGA ICONS KA

  • @itsareeshaay1583
    @itsareeshaay1583 4 года назад +1

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

    • @CodingNepal
      @CodingNepal  4 года назад

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

    • @itsareeshaay1583
      @itsareeshaay1583 4 года назад

      @@CodingNepal OK

  • @MorgansAntics
    @MorgansAntics 4 года назад +2

    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
      @MorgansAntics 4 года назад +1

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

    • @CodingNepal
      @CodingNepal  4 года назад

      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
      @MorgansAntics 4 года назад

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

  • @ahcenekbl
    @ahcenekbl 4 года назад +1

    how do you add links to it please

    • @CodingNepal
      @CodingNepal  4 года назад

      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.

  • @OPEL0413
    @OPEL0413 3 года назад

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

  • @Octo-BoY
    @Octo-BoY 2 года назад

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

    • @Octo-BoY
      @Octo-BoY 2 года назад

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

  • @Urdu_Insights_TV
    @Urdu_Insights_TV 2 года назад +1

    can you share the code of this awesome video

    • @CodingNepal
      @CodingNepal  2 года назад +1

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

    • @Urdu_Insights_TV
      @Urdu_Insights_TV 2 года назад +1

      @@CodingNepal bro it is not responsive

  • @creativeminds5222
    @creativeminds5222 3 года назад +1

    what -70px mean?

  • @clickbatemotivation3260
    @clickbatemotivation3260 2 года назад

    went a step further and added links to the icons

  • @parthgupta4850
    @parthgupta4850 4 года назад +2

    greAt!

  • @movieflick321
    @movieflick321 Год назад

    Plz make wave of water 🥰

  • @technobsgl6744
    @technobsgl6744 4 года назад +1

    how to add our social media links to it

    • @CodingNepal
      @CodingNepal  4 года назад

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

    • @shobithmallya4355
      @shobithmallya4355 4 года назад +1

      @@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
      @CodingNepal  4 года назад

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

    • @shobithmallya4355
      @shobithmallya4355 4 года назад +1

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

    • @shobithmallya4355
      @shobithmallya4355 4 года назад +1

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

  • @rosiekf8381
    @rosiekf8381 2 года назад

    You are so fast bro
    But good job 👍

  • @Gometaysaigon
    @Gometaysaigon 3 года назад

    nice

  • @md.hafijurrahman4461
    @md.hafijurrahman4461 3 года назад +1

    Please slow write the code to understand thank you

    • @CodingNepal
      @CodingNepal  3 года назад

      Thanks for your suggestion and I'll improve it.

  • @seemesarkar2260
    @seemesarkar2260 4 года назад +1

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

    • @CodingNepal
      @CodingNepal  4 года назад +1

      Thank you 💙😁... Stay tuned.

  • @miguelferrarotti5076
    @miguelferrarotti5076 11 дней назад

    यस वेबसाइटमा कुनै भ्रमणहरू छैनन् किनभने तिनीहरू सबै कुरा मुद्रीकरण गर्न चाहन्छन्!!!!

  • @haseeburrehman4212
    @haseeburrehman4212 Год назад

    save my 3 to 5 hour Thanks

  • @adityareddy9109
    @adityareddy9109 3 года назад

    8:02

  • @sayalipathak9468
    @sayalipathak9468 Год назад

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

  • @jugalsharma6114
    @jugalsharma6114 4 года назад +1

    Bhai music ka nam kya ha

  • @acidnitrogaming6625
    @acidnitrogaming6625 2 года назад

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

    • @CodingNepal
      @CodingNepal  2 года назад

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

  • @apindev4726
    @apindev4726 4 года назад +1

    Music menit 1:00 ? Thanks

  • @vinitsharma3925
    @vinitsharma3925 Год назад

    Where is code

  • @yoho8408
    @yoho8408 3 года назад +1

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

  • @mohsinsayyad6347
    @mohsinsayyad6347 4 года назад +1

    ✔👌❤