Social Media Buttons with Tooltip on Hover using only HTML & CSS
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2024
- Social Media Buttons with Tooltip on Hover 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.
Download Codes From Here - www.codingnepa...
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • BEAUZ & JVNA - Crazy |...
Track: Lost Sky - Dreams pt. II (feat. Sara Skinner) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Dreams pt. ...
![[LIVE] : ONE ลุมพินี 79 | คู่เอก "ก้องชัย vs อาเมียร์"](http://i.ytimg.com/vi/WfPSA1A0NHc/mqdefault.jpg)
If your icons aren't showing, replace the line no.7 script of index.html with this:
This was new experience for me.
Thank you from the bottom of my heart!
Succesfully video friend 😄😄😄
Thank you 💙😁... Stay tuned.
it is same for me too😍
Thank you 💙😁... Stay tuned.
@@CodingNepal of course. I already subscribed your channel 🤗
Why this video doesn't have a millions of views??
This is art! Holy smokes! (By the way, I usually hate music on code videos, but this track is amazing, as well.)
Thank you! Glad you enjoyed both the content and the music!
the best channel ever for coding content !.
Awesome bro....
Ajha bolldai tutorial banako vaye ta jhanai sunn maa sugandha nai hunnthyo.❣️
Umm bro.. Abw naya video ma voice add garnw parlaa.
Thank you give me a new concept of animations, thanks again alot of love bro💝
Hello friend thanks for the blessings you give us through coding. Can you please make a video about website responsiveness on all devices.
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.
Okk.. I'll make video on it.. Stay tuned 😁
This video is awesome, but when write i dotn have the icon
can you tell me why ?
that's excellent
Thank you.. Stay tuned 😁
Omg!!! So perfect 😍
Thanks!
You're welcome.. Stay tuned 😁
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
Please make video on sticky icons like what up , Facebook like this
Here is the video - th-cam.com/video/h0_o5jznRWM/w-d-xo.html
This channel deserves better
My pleasure!
Where did you get the icons from? I need them please
this is lovely and helpful
Thanks codding Nepal. I got an recommended video. Can you make an view counter. Please
You are a wizard of code!!!!!
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.
Excellent video
But How to make it appear when we click the social media icons??
Ótimo vídeo parabéns ✌.
website adblocker is faulty and alerting even when i disabled all extensions and tried incognito :(((
THIS IS EPICALLY GOOD
Thank you 💙😁... Stay tuned.
Your vedios is very helpful.
Thank you bro
It's my pleasure
You make very great videos
Itna detail mai koe bhi nii bataya hai
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? 😄
If you don't know then don't worry I'll do for you just contact me on Instagram.
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.
@@CodingNepal okay.. Thank you! :)
Thank you so much
You have given code as well
It makes work so easy
Good work. thanks!
Video and song both are great !!! 🔥
Thank you so much, this helped me alot
Glad it was helpful for you :)
how to add social links to the social icons to made those clickable
@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!
I think u have to go to css and change span to a
How did u get the buttons to work with links?
Incredible, Thanks!!
Thank you so much for this! :)
awesome bro, hats off
Thank you so much 😀
That's amazing
Thank you.. Stay tuned 😁
Nepali honi! Awesome bro :)
Thank you bro 💙 😁
Real professional
Can you please tell me where you learn these programming languages.
From TH-cam videos, blogs, and many free sites
thank you bhai ,You are great'
Love You bro 👍👍
Thanks bro.. Stay tuned 😁
@@CodingNepal ❤️❤️
Bhai whole website par videos banao ek
Mujhe intjaar hai please ☑️
Awesome 👍
Thank you so much
thank you to Social Media Buttons with Tooltip on Hover using
You're welcome... Stay tuned 😁
Olive you
Sorry I love you
@@CodingNepal I love you
Oh wow I also love me!
Very nice !
thank you so much bro
Niice
You're welcome 💙
Should we download the images? like facebook and instagram etc.
These aren't images.. These are icons... Please watch full video for further info.
You are awesome brother
Thank you bro.. Stay tuned 😁
Why did you give flex direction column?
I was doing this just now but then the logo was missing and it says "Not allow when Origin Missing". How to fix this?
You are so nice
Please aap slideshow image kea sath menu bar banao for phone view
Thanks bro
how can we add that green ripple effect on mouse click,can you share that video?
can we just type span{} instead of .wrapper .icon span{}
Yes but it'll select all spans outside .icon and .wrapper if there you used span
Awesome
How do I make it that, when I press the buttons, it brings me to another website.
greAt!
Thank you.. Stay tuned 😁
@@CodingNepal always
how to change the position of this to our wish..plx help me out...
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?
I've checked the code in CodePen so many times, and can't seem to see where I'm going wrong...
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.
@@CodingNepal Totally my fault, it was an HTML, not a CSS error :D
Great widget, thanks!!
why you made span position to relative?
Because I gave children to position absolute
can you recreate this video please using display flex
Friend, could you help me to Make this social icon bar responsive and see it on all My devices
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?
Your tutorial really super
How to Generate Barcode
I'll make video... Stay tuned 😁
@@CodingNepal thanks
Is this possible with tailwind css?
where did you get kit frontawsome website or can you me link
nice
Please slow write the code to understand thank you 💯💚
OK I'll improve it.. Stay tuned 😁
How do I fix the icon turn blue instead of black please reply
In the css file add this a{color: #333;}
Bro can you tell me the import link which you added on style.css
how do i add hyperlink without changing the color?
Email me here codingnepalweb@gmail.com and I'll send code for you.
Hay forma de hacerlo adaptable a otros dispositivos?
did you use bootstrap ??
No it's pure css
@@CodingNepal please do you have any course about css ? in udemy or any other platform ?
need help!!!
HOW TO CHANGE THE POSITION OF THIS WHOLE TO BOTTOM RIGHT OF MY WEB PAGE
@CodingNepal
position: absolute;
bottom: 0px;
right: 0px;
*Thnx bro*
YR YE COLOR KESEY CHANGE HOGA ICONS KA
Hey bro how you preview page in vs code
You are so fast bro
But good job 👍
Its not working beacuse if i open the html file it wont load the css
Plz make wave of water 🥰
genio
save my 3 to 5 hour Thanks
went a step further and added links to the icons
how do you add links to it please
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.
what -70px mean?
To move element -70px
8:02
✔👌❤
Sir,,,its not device responsive .....Can you make it.....?
Sir,, could you please help me to make it device responsive
💻🅶🅾🅳 𝕭𝖑𝖊𝖘𝖘 𝖄𝖔𝖚💻
Thank you 💙😁... Stay tuned.
❤️❤️❤️❤️❤️❤️
Ure used script means ure ued the js I am right na
Css ki file m 1st link kis cheez ka h?
Oh Google font ko import kiya he... Meh kal iska source codes mere website pe provide kardunga.
@@CodingNepal OK
can you share the code of this awesome video
You can copy or download codes from here www.codingnepalweb.com/social-media-buttons-with-tooltip-on-hover/
@@CodingNepal bro it is not responsive
Please slow write the code to understand thank you
Thanks for your suggestion and I'll improve it.
how to add our social media links to it
Just add tag inside each div and insert your social network link inside href attribute of tag.
Like this
@@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?
Yes I've styled the span tag.. Just replace span with tag and change tag name in css codes too.
@@CodingNepal Yes, I did the same. All the icons are becoming purple.
Oh yes, got it. I added text-decoration: none; and color: inherit; Now it works. Thanks a lot.
Where is code
Music menit 1:00 ? Thanks
Up
I didn't understand
Can you please give me the source code of the program bro
You can download it from here - www.codingnepalweb.com/social-media-buttons-with-tooltip-on-hover/
Sorry I didn’t see all your video it was confusing.