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

  Рет қаралды 115,014

CodingNepal

CodingNepal

Күн бұрын

Пікірлер: 209
@CodingNepal
@CodingNepal 5 ай бұрын
If your icons aren't showing, replace the line no.7 script of index.html with this:
@niraj_raut
@niraj_raut 3 жыл бұрын
Today I'm noticing a Nepali channel that's really awesome. You are pro
@CodingNepal
@CodingNepal 3 жыл бұрын
Wow, thanks
@raphaelmottelet5421
@raphaelmottelet5421 4 жыл бұрын
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
@CodingNepal 4 жыл бұрын
You're welcome and don't forget to subscribe for more awesome videos.
@twi4458
@twi4458 3 жыл бұрын
Just want to say Thanks, Seen this type of concept first time. Really glad that I could find ur video.
@CodingNepal
@CodingNepal 3 жыл бұрын
Glad you liked it
@stoby9759
@stoby9759 4 жыл бұрын
Awesome bro, have been looking for this type of social button
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you bro 💙
@VikashXman
@VikashXman 2 жыл бұрын
This could be my best channel for chilling xD
@mymilliondollorjourney7450
@mymilliondollorjourney7450 4 жыл бұрын
Wow what a nice and awesome hover effect... Thanks..codeing Nepal broo
@CodingNepal
@CodingNepal 4 жыл бұрын
You're welcome bro 💙
@HamidRaza08
@HamidRaza08 3 ай бұрын
The code is so simple and very helpful Thanks man
@KrampusPlays
@KrampusPlays 2 жыл бұрын
Literally worked And Amazing Technique :O
@CodingNepal
@CodingNepal 2 жыл бұрын
Great to hear!
@yntkns6094
@yntkns6094 7 ай бұрын
Thanks Man! its usefull for me for my school project lol, been searching for a good visual!
@CodingNepal
@CodingNepal 7 ай бұрын
Glad I could help!
@avinashranjan9622
@avinashranjan9622 3 жыл бұрын
Wow wonderful ❤️❤️❤️❤️❤️❤️❤️..
@CodingNepal
@CodingNepal 3 жыл бұрын
Many many thanks
@onlycoding2227
@onlycoding2227 4 жыл бұрын
Its awesome bro.. keep going
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you bro 💙
@laurasilva-t4n
@laurasilva-t4n 2 жыл бұрын
exactly what i was looking for. thank uuuu!!
@mirabbos02
@mirabbos02 4 жыл бұрын
awesome great work this is what i really wanted
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you 💙
@iamhtmldeveloper
@iamhtmldeveloper 4 жыл бұрын
Nice Creative Work... Thanks for your helpful video :)
@CodingNepal
@CodingNepal 4 жыл бұрын
You're welcome 💙😁
@yashpanchal8464
@yashpanchal8464 2 жыл бұрын
Thank you so much for this cool icons "buttons"
@kartikvarade5039
@kartikvarade5039 4 жыл бұрын
Great work sir thank you so much 🙂
@CodingNepal
@CodingNepal 4 жыл бұрын
You're welcome bro 💙
@loverboyhd4259
@loverboyhd4259 4 жыл бұрын
Awesome Work
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you.. Stay tuned 😁
4 жыл бұрын
awesome thanks bro
@CodingNepal
@CodingNepal 4 жыл бұрын
You're welcome bro.. Stay tuned 😁
4 жыл бұрын
@@CodingNepal haha I'm sis
@CodingNepal
@CodingNepal 4 жыл бұрын
Haha ok sis.. Stay tuned with us 😁
@drunken-panda
@drunken-panda 4 жыл бұрын
This is amazing! Keep up the great work!!
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you 💙
@MohammadAli-iu3oi
@MohammadAli-iu3oi 4 жыл бұрын
Yeah ... Its working ... NICE ...
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you 💙
@JackBrian-wh5bp
@JackBrian-wh5bp Жыл бұрын
Nice bro ❤
@AdeyCoder
@AdeyCoder 4 жыл бұрын
👏 nice work keep it up
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you 💙
@HieuPhan-jt8bj
@HieuPhan-jt8bj 4 жыл бұрын
thanks you, I form Vietnam
@CodingNepal
@CodingNepal 4 жыл бұрын
You're welcome 💙
@stansfieldmalosa5608
@stansfieldmalosa5608 4 жыл бұрын
Hai sir, this indeed amazing.
@CodingNepal
@CodingNepal 4 жыл бұрын
Hey, thanks
@stansfieldmalosa5608
@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
@deepthikorrapati7125
@deepthikorrapati7125 3 жыл бұрын
my styles(CSS) is not working plz help me.i put all style but it doesn't work
@CodingNepal
@CodingNepal 3 жыл бұрын
Make sure you've linked your css file in your html file.
@govines4341
@govines4341 4 жыл бұрын
Bro please make a series of building your own css framework.
@CodingNepal
@CodingNepal 4 жыл бұрын
Ok bro... Stay tuned.
@neelchauhan9770
@neelchauhan9770 4 жыл бұрын
Thank you sooo much
@CodingNepal
@CodingNepal 4 жыл бұрын
You're welcome 💙
@mohsinsayyad6347
@mohsinsayyad6347 4 жыл бұрын
Great work bro ❤👌
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you bro 💙
@muchamadfahmi1315
@muchamadfahmi1315 3 жыл бұрын
thank you sir
@CodingNepal
@CodingNepal 3 жыл бұрын
Most welcome
@Joabson2011
@Joabson2011 3 жыл бұрын
Você é fenomenal!!!
@mael330
@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
@CodingNepal 3 жыл бұрын
If you use image tag then you have to add some custom css for images.
@shaderone07
@shaderone07 4 жыл бұрын
incredible
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you 💙
@adarshkumargupta2181
@adarshkumargupta2181 4 жыл бұрын
Great sir ❤️
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you 💙
@mrandersoncga
@mrandersoncga 4 жыл бұрын
Very Nice!
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you 💙
@artgrigoryan5475
@artgrigoryan5475 4 жыл бұрын
yeah good thanks
@CodingNepal
@CodingNepal 4 жыл бұрын
You're welcome
@Skyraxk
@Skyraxk 3 жыл бұрын
hi bro, how to put link in every button?
@CodingNepal
@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
@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
@Skyraxk 3 жыл бұрын
@@CodingNepal thanks bro. Its work😁
@rudra3300
@rudra3300 3 жыл бұрын
@@CodingNepal bro when I am adding more of them the span isn't shifting right nest to the icon???
@blu_nobile6285
@blu_nobile6285 3 жыл бұрын
@@CodingNepal I have a problem and it is that in the end the icons do not appear
@MarcoAntonioOwono
@MarcoAntonioOwono 3 ай бұрын
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
@OneSlySwan 6 күн бұрын
Nice
@zmzzaytoon5730
@zmzzaytoon5730 4 жыл бұрын
thanks my love
@CodingNepal
@CodingNepal 4 жыл бұрын
Stay tuned.
@zmzzaytoon5730
@zmzzaytoon5730 4 жыл бұрын
@@CodingNepal 💖👍
@moumita7491
@moumita7491 4 жыл бұрын
Great 😍
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you 💙
@Ayassee
@Ayassee Жыл бұрын
wha url did you use on your css? lack of infortmation
@boo8677
@boo8677 4 жыл бұрын
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
@CodingNepal 4 жыл бұрын
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
@abcfuture5779 4 жыл бұрын
Cool bro
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you bro 💙😁
@yasminebetrouni804
@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
@faisalmanali11 2 жыл бұрын
Thanks
@wintmain
@wintmain 4 жыл бұрын
Soooo good.
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you 💙
@clevercoderjoy
@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
@bastizocker84
@bastizocker84 4 жыл бұрын
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
@CodingNepal 4 жыл бұрын
Contact me on Instagram and I'll do it for you.
@amineakremi5105
@amineakremi5105 Жыл бұрын
@@CodingNepal Can you give me the solutions please
@sonqua6709
@sonqua6709 Жыл бұрын
i cant find the button in the button section of the link you provided
@ytardihydra3995
@ytardihydra3995 4 жыл бұрын
i like it
@CodingNepal
@CodingNepal 4 жыл бұрын
Thank you.. Stay tuned 😁
@florianmolnar5848
@florianmolnar5848 4 жыл бұрын
Hi, what ide do you use?
@CodingNepal
@CodingNepal 4 жыл бұрын
Atom.. Here is the video - kzbin.info/www/bejne/a2a5m4uKmr6eiqc
@ipdev-c1c
@ipdev-c1c Жыл бұрын
How to make, when on hover text show in right side of the icon.
@prosenjeetsarker
@prosenjeetsarker Жыл бұрын
How to target it?code please I wanna little bit small icon 🙏
@rupeshbharuka7755
@rupeshbharuka7755 2 жыл бұрын
Which software do you use to record your screen? I'd be thankful to you for your response.
@CodingNepal
@CodingNepal 2 жыл бұрын
I use Filmora screen recorder that comes with Filmora video editor
@rupeshbharuka7755
@rupeshbharuka7755 2 жыл бұрын
@@CodingNepal Thank you so much for your kind response. I'll try exploring the same. Your videos are awesome buddy.
@syediqbalahmed3176
@syediqbalahmed3176 3 жыл бұрын
vola ... ocay ... quickly done ...
@pankajdahal8787
@pankajdahal8787 4 жыл бұрын
Hey prakash bro, you got adsence with 2 months old Domain ? 😲😲
@CodingNepal
@CodingNepal 4 жыл бұрын
Yes I got approval in 15 days after buy domain name. But first time it was rejected.
@pankajdahal8787
@pankajdahal8787 4 жыл бұрын
@@CodingNepal Congratulation bro , My got rejected more than 3 times.
@pankajdahal8787
@pankajdahal8787 4 жыл бұрын
@@CodingNepal ani himalayan hosting bata domain lida ta free ma Domain protection dinu parne ho ta.
@CodingNepal
@CodingNepal 4 жыл бұрын
How... What's your niche.?
@CodingNepal
@CodingNepal 4 жыл бұрын
Kati posts index garerw apply gartheu ni
@iftakharahammed4879
@iftakharahammed4879 4 жыл бұрын
what is the url(?????) in css.......i hope i will answered me
@CodingNepal
@CodingNepal 4 жыл бұрын
Here is the codes - www.codingnepalweb.com/2020/07/awesome-social-media-buttons-with-hover-animation.html
@LeQuocDat96
@LeQuocDat96 4 жыл бұрын
Please ask what this software is
@CodingNepal
@CodingNepal 4 жыл бұрын
Atom... I've made a video on it.. Check description.
@LeQuocDat96
@LeQuocDat96 4 жыл бұрын
@@CodingNepal I mean what is the software used to code the code?
@CodingNepal
@CodingNepal 4 жыл бұрын
Atom Text Editor
@ankitbhujeja1777
@ankitbhujeja1777 3 жыл бұрын
Bro how u change 5 lines in a single word called span at 5 lines at last after copy ?
@CodingNepal
@CodingNepal 3 жыл бұрын
You've to install emmet in your text editor and do same I did then press tab
@furqan8275
@furqan8275 4 жыл бұрын
what app is this mate?
@CodingNepal
@CodingNepal 4 жыл бұрын
Atom... Check description.. I've made a video on it.
@furqan8275
@furqan8275 4 жыл бұрын
@@CodingNepal sorry mate, i didn't see it before. thx for reply! Improve your skill and hope u for the best!
@CodingNepal
@CodingNepal 4 жыл бұрын
Okk ... Keep watching 😁
@juliopratama6084
@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.. :)
@parvinderbainsla4270
@parvinderbainsla4270 3 жыл бұрын
Why you not tell about
@CodingNepal
@CodingNepal 3 жыл бұрын
This is a FontAwesome script and it's used for icons only.
@raidenedit6481
@raidenedit6481 4 жыл бұрын
It's great man, I just have a question, what is the name of this music?
@CodingNepal
@CodingNepal 4 жыл бұрын
Check description
@johnrobson550
@johnrobson550 4 жыл бұрын
@@CodingNepal wow
@aangcrdbl
@aangcrdbl 3 жыл бұрын
bro, how do you get the icons to appear? Mine don't appear at all
@CodingNepal
@CodingNepal 3 жыл бұрын
Replace the line.no 7 script tag of html file with this one:
@mr.x3453
@mr.x3453 4 жыл бұрын
social media icon doesn't display.give a suggest to correct it.
@CodingNepal
@CodingNepal 4 жыл бұрын
Make sure you're connected with the Internet.
@RohitTharu-yy8cz
@RohitTharu-yy8cz 3 жыл бұрын
@@CodingNepal thanks
@rudra3300
@rudra3300 3 жыл бұрын
How to reveal them by button click???? Please help...
@manitdave6168
@manitdave6168 4 жыл бұрын
Please you create google multi color icon with fa fa-google
@CodingNepal
@CodingNepal 4 жыл бұрын
I didn't understand
@codessite
@codessite 4 жыл бұрын
what is the name of the font ?
@CodingNepal
@CodingNepal 4 жыл бұрын
Poppins
@codessite
@codessite 4 жыл бұрын
@@CodingNepal Thanks
@josecandia9991
@josecandia9991 3 жыл бұрын
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
@mictronic1 2 жыл бұрын
Probably you wrote span in i tag. Span must be below.
@dariography
@dariography 8 ай бұрын
@@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
@breadstickkzxc3416 4 жыл бұрын
how to make a function out of this social media accounts which will direct you into it
@CodingNepal
@CodingNepal 4 жыл бұрын
Just add tag and insert your fb url inside href attribute of tag. Like this
@davidbotero9391
@davidbotero9391 4 жыл бұрын
@@CodingNepal can you show me an example? where add , please.
@aadityatrivedi7601
@aadityatrivedi7601 2 жыл бұрын
bro your social icon class link shows invalid link . and bro i want source code of all social icon
@LazyRoute
@LazyRoute 4 жыл бұрын
Tq bro
@CodingNepal
@CodingNepal 4 жыл бұрын
You're welcome bro 💙
@pinealgo
@pinealgo Жыл бұрын
How to add this code to my wix website
@calebmendez2838
@calebmendez2838 3 жыл бұрын
I have a problem with the "float" property ☹️
@CodingNepal
@CodingNepal 3 жыл бұрын
What's the problem?
@FabricioAndrad3
@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
@TFAROTGaming 3 жыл бұрын
Your website is returning "Error establishing a database connection"
@CodingNepal
@CodingNepal 3 жыл бұрын
Yes, we're working to fix it
@CodingNepal
@CodingNepal 3 жыл бұрын
Site is live now. Sorry for the inconveniences.
@charlestheninja
@charlestheninja 3 жыл бұрын
How to call a js function from it? After a simple click
@zinebbk9137
@zinebbk9137 2 жыл бұрын
can you share the code of this awesome video thank you
@CodingNepal
@CodingNepal 2 жыл бұрын
Here is the code: www.codingnepalweb.com/social-media-buttons-with-hover-animation/
@alfharisqiwicaksono5853
@alfharisqiwicaksono5853 3 жыл бұрын
bro, how to make a responsive ?
@CodingNepal
@CodingNepal 3 жыл бұрын
Use media breakpoints for it
@loverboyhd4259
@loverboyhd4259 4 жыл бұрын
This codes are free open to use for anyone ??? No copywrite issue
@CodingNepal
@CodingNepal 4 жыл бұрын
You're free to use but don't claim it's own.
@thirudiwa5231
@thirudiwa5231 Жыл бұрын
bro where iget the fontawesome script
@utsavshah9937
@utsavshah9937 4 жыл бұрын
give this Editors name plz....
@CodingNepal
@CodingNepal 4 жыл бұрын
Atom and I've made a video on it - kzbin.info/www/bejne/a2a5m4uKmr6eiqc
@stevebendersky2056
@stevebendersky2056 Жыл бұрын
Doesnt work if the icon is an SVG and not text
@LaxrFar
@LaxrFar 4 жыл бұрын
how to make when i click on a botton a website opens
@CodingNepal
@CodingNepal 4 жыл бұрын
Add a anchor tag inside all and insert the particular website url inside the href attribute of tag.
@LaxrFar
@LaxrFar 4 жыл бұрын
@@CodingNepal thats the code and where i add what ?
@CodingNepal
@CodingNepal 4 жыл бұрын
When you want redirect your user on icon click or text click or anywhere ..?
@LaxrFar
@LaxrFar 4 жыл бұрын
@@CodingNepal anywhere
@CodingNepal
@CodingNepal 4 жыл бұрын
Then put tag after .button and before .icon.
@_chetirko
@_chetirko 4 жыл бұрын
Hi man its great but can i make it working i mean to really take me to my instagram and more.Help plz
@CodingNepal
@CodingNepal 4 жыл бұрын
Please add this tag
@_chetirko
@_chetirko 4 жыл бұрын
@@CodingNepal Thanks man!
@shahabhosseiniashna1710
@shahabhosseiniashna1710 Жыл бұрын
like it
@vijaypanchalr3
@vijaypanchalr3 3 жыл бұрын
How to open toggle in right
@loverboyhd4259
@loverboyhd4259 4 жыл бұрын
Hii bro I am unable to link my account please edit and send me codes with href please please
@CodingNepal
@CodingNepal 4 жыл бұрын
Can you contact me on Instagram?
@michaelasante5002
@michaelasante5002 2 жыл бұрын
Nothing seems to work even with the same code. Strange
@3mmar.124
@3mmar.124 3 жыл бұрын
place-item!!!
@dtech4321
@dtech4321 3 жыл бұрын
Git hub replace with whatsap pls
@CodingNepal
@CodingNepal 3 жыл бұрын
It's just simple just change class name to whatsapp in html file. Like this
@Santoshdc
@Santoshdc 4 жыл бұрын
Bro tapaiko Facebook ID ke ho ?
@CodingNepal
@CodingNepal 4 жыл бұрын
Description maa xw..
@mohammedsahim8244
@mohammedsahim8244 2 жыл бұрын
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.
Social Media Buttons with Tooltip on Hover using only HTML & CSS
8:56
Advanced Button Hover Animations - CSS Only
18:22
Web Dev Simplified
Рет қаралды 142 М.
VIP ACCESS
00:47
Natan por Aí
Рет қаралды 14 МЛН
Чистка воды совком от денег
00:32
FD Vasya
Рет қаралды 5 МЛН
How To Create Social Media Buttons Hover Effect Only HTML and CSS
6:21
Responsive Social Media Icons in HTML & CSS | Social Icon in HTML & CSS
12:55
Crazy Ink Animation Effect with CSS Only
6:47
Lun Dev
Рет қаралды 67 М.
Button Ripple Effect on Click Using CSS3 & Vanilla Javascript
3:46
Online Tutorials
Рет қаралды 188 М.