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

[@CodingNepal]

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

[@niraj_raut]

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

[@CodingNepal]

Wow, thanks

[@raphaelmottelet5421]

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.

[@CodingNepal]

You're welcome and don't forget to subscribe for more awesome videos.

[@twi4458]

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

[@CodingNepal]

Glad you liked it

[@stoby9759]

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

[@CodingNepal]

Thank you bro 💙

[@VikashXman]

This could be my best channel for chilling xD

[@mymilliondollorjourney7450]

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

[@CodingNepal]

You're welcome bro 💙

[@HamidRaza08]

The code is so simple and very helpful Thanks man

[@KrampusPlays]

Literally worked And Amazing Technique :O

[@CodingNepal]

Great to hear!

[@yntkns6094]

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

[@CodingNepal]

Glad I could help!

[@avinashranjan9622]

Wow wonderful ❤️❤️❤️❤️❤️❤️❤️..

[@CodingNepal]

Many many thanks

[@onlycoding2227]

Its awesome bro.. keep going

[@CodingNepal]

Thank you bro 💙

[@laurasilva-t4n]

exactly what i was looking for. thank uuuu!!

[@mirabbos02]

awesome great work this is what i really wanted

[@CodingNepal]

Thank you 💙

[@iamhtmldeveloper]

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

[@CodingNepal]

You're welcome 💙😁

[@yashpanchal8464]

Thank you so much for this cool icons "buttons"

[@kartikvarade5039]

Great work sir thank you so much 🙂

[@CodingNepal]

You're welcome bro 💙

[@loverboyhd4259]

Awesome Work

[@CodingNepal]

Thank you.. Stay tuned 😁

awesome thanks bro

[@CodingNepal]

You're welcome bro.. Stay tuned 😁

@@CodingNepal haha I'm sis

[@CodingNepal]

Haha ok sis.. Stay tuned with us 😁

[@drunken-panda]

This is amazing! Keep up the great work!!

[@CodingNepal]

Thank you 💙

[@MohammadAli-iu3oi]

Yeah ... Its working ... NICE ...

[@CodingNepal]

Thank you 💙

[@JackBrian-wh5bp]

Nice bro ❤

[@AdeyCoder]

👏 nice work keep it up

[@CodingNepal]

Thank you 💙

[@HieuPhan-jt8bj]

thanks you, I form Vietnam

[@CodingNepal]

You're welcome 💙

[@stansfieldmalosa5608]

Hai sir, this indeed amazing.

[@CodingNepal]

Hey, thanks

[@stansfieldmalosa5608]

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

[@deepthikorrapati7125]

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

[@CodingNepal]

Make sure you've linked your css file in your html file.

[@govines4341]

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

[@CodingNepal]

Ok bro... Stay tuned.

[@neelchauhan9770]

Thank you sooo much

[@CodingNepal]

You're welcome 💙

[@mohsinsayyad6347]

Great work bro ❤👌

[@CodingNepal]

Thank you bro 💙

[@muchamadfahmi1315]

thank you sir

[@CodingNepal]

Most welcome

[@Joabson2011]

Você é fenomenal!!!

[@mael330]

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 ?

[@CodingNepal]

If you use image tag then you have to add some custom css for images.

[@shaderone07]

incredible

[@CodingNepal]

Thank you 💙

[@adarshkumargupta2181]

Great sir ❤️

[@CodingNepal]

Thank you 💙

[@mrandersoncga]

Very Nice!

[@CodingNepal]

Thank you 💙

[@artgrigoryan5475]

yeah good thanks

[@CodingNepal]

You're welcome

[@Skyraxk]

hi bro, how to put link in every button?

[@CodingNepal]

There is a .button div right.. Just change this div to and change the .button div close tag into Syntax: ... some other tags here.... Just change above starting tag and closing tag to ... Some other tags here....

[@broveerPI]

@@CodingNepal We have to add also because otherwise it changes the color to blue and purple. (I added the extra style in this)

[@Skyraxk]

@@CodingNepal thanks bro. Its work😁

[@rudra3300]

@@CodingNepal bro when I am adding more of them the span isn't shifting right nest to the icon???

[@blu_nobile6285]

@@CodingNepal I have a problem and it is that in the end the icons do not appear

[@MarcoAntonioOwono]

Hi, nice video. It's good but how can I move all the buttons at once without losing any effect? ​​Because on my page I not only have that but also a top menu and a login, and the latter tends to move because the buttons take their place, I need: 1. General position of the buttons, how do I move them? 2. How do I make it not overlap my login panel? 3. How do I reduce the size of the buttons?

[@OneSlySwan]

Nice

[@zmzzaytoon5730]

thanks my love

[@CodingNepal]

Stay tuned.

[@zmzzaytoon5730]

@@CodingNepal 💖👍

[@moumita7491]

Great 😍

[@CodingNepal]

Thank you 💙

[@Ayassee]

wha url did you use on your css? lack of infortmation

[@boo8677]

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?

[@CodingNepal]

At first icons have only 60px width so the remaining or overflow text moved to the bottom and due to the overflow: hidden property, overflow text aren't displayed but when we hover on the particular icon, the width of that icon becomes 200px and then the text appears. Yes there is no need to write display: inline-block twice... It can be inherit from the parent element. If you're facing problems.. Please download the source files from the description link.

[@abcfuture5779]

Cool bro

[@CodingNepal]

Thank you bro 💙😁

[@yasminebetrouni804]

pls telll me from where did u get the script link of icons bcs i'm looking for more icons .and ur code is helpfull thank you

[@faisalmanali11]

Thanks

[@wintmain]

Soooo good.

[@CodingNepal]

Thank you 💙

[@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

[@bastizocker84]

Im still a beginner but when I want the "button" to lead me somewhere I need to put an tag around the tag right ? Btw awesome buttons man I appreciate it Edit : Never mind I found it

[@CodingNepal]

Contact me on Instagram and I'll do it for you.

[@amineakremi5105]

@@CodingNepal Can you give me the solutions please

[@sonqua6709]

i cant find the button in the button section of the link you provided

[@ytardihydra3995]

i like it

[@CodingNepal]

Thank you.. Stay tuned 😁

[@florianmolnar5848]

Hi, what ide do you use?

[@CodingNepal]

Atom.. Here is the video - kzbin.info/www/bejne/a2a5m4uKmr6eiqc

[@ipdev-c1c]

How to make, when on hover text show in right side of the icon.

[@prosenjeetsarker]

How to target it?code please I wanna little bit small icon 🙏

[@rupeshbharuka7755]

Which software do you use to record your screen? I'd be thankful to you for your response.

[@CodingNepal]

I use Filmora screen recorder that comes with Filmora video editor

[@rupeshbharuka7755]

@@CodingNepal Thank you so much for your kind response. I'll try exploring the same. Your videos are awesome buddy.

[@syediqbalahmed3176]

vola ... ocay ... quickly done ...

[@pankajdahal8787]

Hey prakash bro, you got adsence with 2 months old Domain ? 😲😲

[@CodingNepal]

Yes I got approval in 15 days after buy domain name. But first time it was rejected.

[@pankajdahal8787]

@@CodingNepal Congratulation bro , My got rejected more than 3 times.

[@pankajdahal8787]

@@CodingNepal ani himalayan hosting bata domain lida ta free ma Domain protection dinu parne ho ta.

[@CodingNepal]

How... What's your niche.?

[@CodingNepal]

Kati posts index garerw apply gartheu ni

[@iftakharahammed4879]

what is the url(?????) in css.......i hope i will answered me

[@CodingNepal]

Here is the codes - www.codingnepalweb.com/2020/07/awesome-social-media-buttons-with-hover-animation.html

[@LeQuocDat96]

Please ask what this software is

[@CodingNepal]

Atom... I've made a video on it.. Check description.

[@LeQuocDat96]

@@CodingNepal I mean what is the software used to code the code?

[@CodingNepal]

Atom Text Editor

[@ankitbhujeja1777]

Bro how u change 5 lines in a single word called span at 5 lines at last after copy ?

[@CodingNepal]

You've to install emmet in your text editor and do same I did then press tab

[@furqan8275]

what app is this mate?

[@CodingNepal]

Atom... Check description.. I've made a video on it.

[@furqan8275]

@@CodingNepal sorry mate, i didn't see it before. thx for reply! Improve your skill and hope u for the best!

[@CodingNepal]

Okk ... Keep watching 😁

[@juliopratama6084]

I have a problem with float , this code cannot apply display: inline-block; .wrapper .button { display: inline-block; height: 60px; width: 60px; margin: 0 5px; float: left; border-radius: 50px; background: #fff; cursor: pointer; box-shadow: 0px 10px 10px rgba (0, 0, 0, 0.1); } the float: left there doesn't have effect.. so my text just still bellow the icon when button:hover move. please. help.. :)

[@parvinderbainsla4270]

Why you not tell about

[@CodingNepal]

This is a FontAwesome script and it's used for icons only.

[@raidenedit6481]

It's great man, I just have a question, what is the name of this music?

[@CodingNepal]

Check description

[@johnrobson550]

@@CodingNepal wow

[@aangcrdbl]

bro, how do you get the icons to appear? Mine don't appear at all

[@CodingNepal]

Replace the line.no 7 script tag of html file with this one:

[@mr.x3453]

social media icon doesn't display.give a suggest to correct it.

[@CodingNepal]

Make sure you're connected with the Internet.

[@RohitTharu-yy8cz]

@@CodingNepal thanks

[@rudra3300]

How to reveal them by button click???? Please help...

[@manitdave6168]

Please you create google multi color icon with fa fa-google

[@CodingNepal]

I didn't understand

[@codessite]

what is the name of the font ?

[@CodingNepal]

Poppins

[@codessite]

@@CodingNepal Thanks

[@josecandia9991]

hi, i have the same code but the propety "inline-block" is not working with the class button, the text is ever under the icon and the propety float in vs-code show an alert that say: inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block' if someone cant help me i'll really grateful.

[@mictronic1]

Probably you wrote span in i tag. Span must be below.

[@dariography]

@@mictronic1 I didnt, and I have the same issue. The span text is always below... :( Still no solution? Or what are we doing wrong? Problably smth wrong

[@breadstickkzxc3416]

how to make a function out of this social media accounts which will direct you into it

[@CodingNepal]

Just add tag and insert your fb url inside href attribute of tag. Like this

[@davidbotero9391]

@@CodingNepal can you show me an example? where add , please.

[@aadityatrivedi7601]

bro your social icon class link shows invalid link . and bro i want source code of all social icon

[@LazyRoute]

Tq bro

[@CodingNepal]

You're welcome bro 💙

[@pinealgo]

How to add this code to my wix website

[@calebmendez2838]

I have a problem with the "float" property ☹️

[@CodingNepal]

What's the problem?

[@FabricioAndrad3]

@@CodingNepal Specifies how a box should be floated. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. (Edge 12, Firefox 1, Safari 1, Chrome 1, IE 4, Opera 7) Syntax: left | right | none | inline-start | inline-end MDN Reference inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'css(propertyIgnoredDueToDisplay)

[@TFAROTGaming]

Your website is returning "Error establishing a database connection"

[@CodingNepal]

Yes, we're working to fix it

[@CodingNepal]

Site is live now. Sorry for the inconveniences.

[@charlestheninja]

How to call a js function from it? After a simple click

[@zinebbk9137]

can you share the code of this awesome video thank you

[@CodingNepal]

Here is the code: www.codingnepalweb.com/social-media-buttons-with-hover-animation/

[@alfharisqiwicaksono5853]

bro, how to make a responsive ?

[@CodingNepal]

Use media breakpoints for it

[@loverboyhd4259]

This codes are free open to use for anyone ??? No copywrite issue

[@CodingNepal]

You're free to use but don't claim it's own.

[@thirudiwa5231]

bro where iget the fontawesome script

[@utsavshah9937]

give this Editors name plz....

[@CodingNepal]

Atom and I've made a video on it - kzbin.info/www/bejne/a2a5m4uKmr6eiqc

[@stevebendersky2056]

Doesnt work if the icon is an SVG and not text

[@LaxrFar]

how to make when i click on a botton a website opens

[@CodingNepal]

Add a anchor tag inside all and insert the particular website url inside the href attribute of tag.

[@LaxrFar]

@@CodingNepal thats the code and where i add what ?

[@CodingNepal]

When you want redirect your user on icon click or text click or anywhere ..?

[@LaxrFar]

@@CodingNepal anywhere

[@CodingNepal]

Then put tag after .button and before .icon.

[@_chetirko]

Hi man its great but can i make it working i mean to really take me to my instagram and more.Help plz

[@CodingNepal]

Please add this tag

[@_chetirko]

@@CodingNepal Thanks man!

[@shahabhosseiniashna1710]

like it

[@vijaypanchalr3]

How to open toggle in right

[@loverboyhd4259]

Hii bro I am unable to link my account please edit and send me codes with href please please

[@CodingNepal]

Can you contact me on Instagram?

[@michaelasante5002]

Nothing seems to work even with the same code. Strange

[@3mmar.124]

place-item!!!

[@dtech4321]

Git hub replace with whatsap pls

[@CodingNepal]

It's just simple just change class name to whatsapp in html file. Like this

[@Santoshdc]

Bro tapaiko Facebook ID ke ho ?

[@CodingNepal]

Description maa xw..

[@mohammedsahim8244]

Your code is terrible because this doesn't work, it has the button align at the button unevenly and not how it appears in your video.