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

Подписаться 229 тыс.

Просмотров 111 тыс.

50% 1

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.
Download Codes From Here - www.codingnepa...
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Levianth & Axol - Remember (feat. The Tech Thieves) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Levianth & Axol - Reme...

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 208

@CodingNepal 3 месяца назад

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

@raphaelmottelet5421 3 года назад

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 3 года назад

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

@niraj_raut 3 года назад

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

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

Wow, thanks

@stoby9759 4 года назад

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

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

Thank you bro 💙

@HamidRaza-e6p Месяц назад

The code is so simple and very helpful Thanks man

@twi4458 3 года назад

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

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

Glad you liked it

@MarcoAntonioOwono 20 дней назад

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?

@deepthikorrapati7125 2 года назад

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

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

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

@mymilliondollorjourney7450 4 года назад

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

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

You're welcome bro 💙

@stansfieldmalosa5608 4 года назад

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

@yntkns6094 4 месяца назад

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

@CodingNepal 4 месяца назад

Glad I could help!

@VikashXman 2 года назад

This could be my best channel for chilling xD

@drunken-panda 4 года назад

This is amazing! Keep up the great work!!

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

Thank you 💙

@KrampusPlays 2 года назад

Literally worked And Amazing Technique :O

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

Great to hear!

@laurasilvajimenez2200 2 года назад

exactly what i was looking for. thank uuuu!!

@boo8677 3 года назад

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 3 года назад

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.

@mael330 3 года назад

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 3 года назад

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

@mirabbos02 4 года назад

awesome great work this is what i really wanted

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

Thank you 💙

@iamhtmldeveloper 4 года назад

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

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

You're welcome 💙😁

@yashpanchal8464 2 года назад

Thank you so much for this cool icons "buttons"

@Joabson2011 3 года назад

Você é fenomenal!!!

@onlycoding2227 4 года назад

Its awesome bro.. keep going

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

Thank you bro 💙

@bastizocker84 3 года назад

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 3 года назад

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

@amineakremi5105 Год назад

@@CodingNepal Can you give me the solutions please

@juliopratama6084 2 года назад

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.. :)

@Skyraxk 3 года назад

hi bro, how to put link in every button?

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

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 3 года назад

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

@Skyraxk 3 года назад

@@CodingNepal thanks bro. Its work😁

@rudra3300 3 года назад

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

@blu_nobile6285 3 года назад

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

@ipdev-c1c 9 месяцев назад

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

@kartikvarade5039 4 года назад

Great work sir thank you so much 🙂

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

You're welcome bro 💙

4 года назад

awesome thanks bro

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

You're welcome bro.. Stay tuned 😁

4 года назад

@@CodingNepal haha I'm sis

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

Haha ok sis.. Stay tuned with us 😁

@clevercoderjoy 3 года назад

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

@AdeyCoder 4 года назад

👏 nice work keep it up

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

Thank you 💙

@avinashranjan9622 3 года назад

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

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

Many many thanks

@yasminebetrouni804 9 месяцев назад

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

@MohammadAli-iu3oi 4 года назад

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

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

Thank you 💙

@loverboyhd4259 4 года назад

Awesome Work

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

Thank you.. Stay tuned 😁

@govines4341 4 года назад

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

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

Ok bro... Stay tuned.

@JackBrian-wh5bp Год назад

Nice bro ❤

@HieuPhan-jt8bj 4 года назад

thanks you, I form Vietnam

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

You're welcome 💙

@neelchauhan9770 3 года назад

Thank you sooo much

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

You're welcome 💙

@stansfieldmalosa5608 4 года назад

Hai sir, this indeed amazing.

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

Hey, thanks

@shaderone07 4 года назад

incredible

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

Thank you 💙

@Ayassee Год назад

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

@prosenjeetsarker Год назад

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

@muchamadfahmi1315 3 года назад

thank you sir

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

Most welcome

@sonqua6709 Год назад

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

@mohsinsayyad6347 4 года назад

Great work bro ❤👌

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

Thank you bro 💙

@raidenedit6481 4 года назад

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

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

Check description

@johnrobson550 4 года назад

@@CodingNepal wow

@artgrigoryan5475 3 года назад

yeah good thanks

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

You're welcome

@TFAROTGaming 3 года назад

Your website is returning "Error establishing a database connection"

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

Yes, we're working to fix it

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

Site is live now. Sorry for the inconveniences.

@ankitbhujeja1777 3 года назад

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

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

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

@faisalsediqi2780 2 года назад

Thanks

@rupeshbharuka7755 2 года назад

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

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

I use Filmora screen recorder that comes with Filmora video editor

@rupeshbharuka7755 2 года назад

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

@parvinderbainsla4270 3 года назад

Why you not tell about

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

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

@adarshkumargupta2181 4 года назад

Great sir ❤️

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

Thank you 💙

@furqan8275 4 года назад

what app is this mate?

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

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

@furqan8275 4 года назад

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

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

Okk ... Keep watching 😁

@abcfuture5779 4 года назад

Cool bro

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

Thank you bro 💙😁

@LeQuocDat96 4 года назад

Please ask what this software is

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

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

@LeQuocDat96 4 года назад

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

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

Atom Text Editor

@mr.x3453 4 года назад

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

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

Make sure you're connected with the Internet.

@RohitTharu-yy8cz 3 года назад

@@CodingNepal thanks

@stevebendersky2056 9 месяцев назад

Doesnt work if the icon is an SVG and not text

@rudra3300 3 года назад

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

@iftakharahammed4879 3 года назад

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

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

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

@moumita7491 4 года назад

Great 😍

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

Thank you 💙

@pankajdahal8787 4 года назад

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

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

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

@pankajdahal8787 4 года назад

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

@pankajdahal8787 4 года назад

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

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

How... What's your niche.?

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

Kati posts index garerw apply gartheu ni

@florianmolnar5848 4 года назад

Hi, what ide do you use?

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

Atom.. Here is the video - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-55VjXTeYkTE.html

@josecandia9991 2 года назад

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

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

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

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

@aadityatrivedi7601 2 года назад

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

@wintmain 3 года назад

Soooo good.

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

Thank you 💙

@pinealgo Год назад

How to add this code to my wix website

@zmzzaytoon5730 4 года назад

thanks my love

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

Stay tuned.

@zmzzaytoon5730 4 года назад

@@CodingNepal 💖👍

@ytardihydra3995 4 года назад

i like it

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

Thank you.. Stay tuned 😁

@breadstickkzxc3416 4 года назад

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

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

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

@davidbotero9391 3 года назад

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

@aangcrdbl 3 года назад

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

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

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

@loverboyhd4259 4 года назад

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

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

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

@charlestheninja 3 года назад

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

@manitdave6168 4 года назад

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

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

I didn't understand

@thirudiwa5231 10 месяцев назад

bro where iget the fontawesome script

@LazyRoute 4 года назад

Tq bro

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

You're welcome bro 💙

@calebmendez2838 3 года назад

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

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

What's the problem?

@FabricioAndrad3 10 месяцев назад

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