Social media buttons with amazing animation on hover using html & css

[@leeli9243]

Wow that looks amazing! Thank you darkcode!

[@DarkCodeOnline]

Welcome

[@mujeebchishti8577]

You design awesome things like buttons, menu, navigation and login page respect man... Love ❤from India 🇮🇳

[@mounikagedi6610]

Just now a subscriber from me..u deserve itttt!!!!!!!!!!!

[@mahirfaisalarian9960]

Dude I just loved the video. I pray for your great future.ThankYou.👍

[@AudioPervert1]

However amazing the animation, it does take us back to the same websites which harvest our minds, content and data.

[@Science_Flow_BD]

Really,,, Awesome...Never Give up ✔

[@vamsichilukuri]

I'm addicted to ur channel

[@nomanraju9061]

Best Web channel... Thanks a lot DarkcoDe Team...

[@taskilmahmud8503]

Dammm one video and already a subscriber Let's hope this leads to a good journey

[@ahurein1641]

Same here...

[@adityadighe1582]

Excellent tutorial Sir !! I learned so many things by watching your video !! You are great and have been of great help. My best wishes to you for your future plans and life !! Thank you so much !!! Love from India !!!

[@opentech9372]

I think adding subtitle in your video or youtube will help the viewers 🙏Great tutorials

[@YoYo-eg6rc]

Yes you are right dude

[@jonathan3488]

Subtitles will just interrupt focusing on the code, unless he freezes or slows the video , and that will make the tutorials much longer to watch, and cause extra editing work

[@subhanalisajjad9616]

Wow man u are really a creative hats off !!!!! But I have a small question which editor u use????

[@imanueldamar]

My first impression "MANTUL-Mantap Betul" - indonesian langue in english very nice thanks

[@JamShi_Life]

its just awesome... which notepad did you use? and how did you make the preview tab?

[@JuanseTech]

He uses atom, with the package atom-html-preview

[@sexyorchestraboy]

Thanks for your answer, I was wondering the same.

[@user-z5jg3ce1j]

Amazing! Thank you! (P.S. Hello from Ukraine!)

[@rajab4187]

Hello

[@rajab4187]

I'm ur 63 subscriber

[@ekowyamoah5807]

I started web development not long ago and I'm learning a lot from you thanks a lot

[@unlimitedcreativity4400]

Amazing. Honestly you make the best modern things in html I have ever seen. Just a request, what is the name of the song of your intro

[@nurulfikri2967]

lana del rey - dark paradise

[@DelaFarta]

Thank you man, it help a lot beginners !

[@kong1999]

This is nice! Thank you for sharing!

[@dburnside22]

That looks super sweet!

[@luis96xd]

Excellent video tutorial! Thanks! :D

[@Asif05288]

Amazing Sir You beauty of coding world

[@hvmanhabits118]

MERCIII CHEF BON COURAGE ON ATTEND VOS VIDEOS TJRS 👍👍

[@25inzy]

Great job buddy.... Please keep it up

[@peterkulik5943]

Your videos are awesome!

[@DarkCodeOnline]

thank you

[@manojdewangan7534]

You are awesome bro!!! I really like your all videos!

[@MilkyWay-ru5fx]

OMG Amazing video!!!!!!!! I love this brooooooo

[@mandms7686]

You got skills bro

[@frontendblog1804]

OOH men you're so crazy! Never give up! The best

[@DarkCodeOnline]

Thx

[@GauravSingh-wc4hd]

What text editor you are using? Nice tutorials though!! Keep it Up!!

[@akionka]

It's atom

[@bossysmaxx]

@@akionka yes

[@akionka]

@@bossysmaxx Thx. I know.

[@bossysmaxx]

@@akionka poopTheLoop

[@oracle7858]

4:21 why do the squares from .btn::before appear slightly to the right of each button instead of covering the button?

[@satellitesage2487]

Because of the text-align: center set inside of .middle

[@bigdeltaguy4572]

Your content is extremely valuable. Thankyou

[@ata-uo8cm]

Very Nice Video

[@eliteitinerary]

I Love The Music And Your Social Icons Awesome Job There! Salute To You ?

[@mukhtarhussain2659]

you deserve to be subscribed (Y), good job.

[@ahmadcreators8906]

thank you so much brother i learn too many things

[@noobff9201]

Thank you Darkcode ....💞💞💞💞

[@KnowingD]

I benefit from you so much thanks to this explanation

[@vicomaya7448]

Thank you Guys. Excellent.

[@matheussjusttino]

Amazing! Thanks so much for work.

[@vivekkumawat6307]

Bro which text editor are you use please bro tell me

[@DarkCodeOnline]

Atom

[@vivekkumawat6307]

@@DarkCodeOnline thaks bro😊

[@huberman-shorts-podcast]

Very good.. you are a master!!!

[@NapoleonRoca]

thank for joint your knowledge

[@DarkCodeOnline]

Welcome!

[@deduice]

Cute! Where's the simplest way to start learning coding - HTML and CSS?

[@alvarojflores]

At home, with this video tutorials, cheers!

[@deduice]

@@alvarojflores, thanks for your reply. I'm looking for something basic for a beginner. I'm more of a designer than a coder

[@deduice]

@@alvarojflores, thanks for your reply. I'm looking for something basic for a beginner. I'm more of a designer than a coder

[@opentech9372]

@Ahmed Isiaq Deduice as a beginner youtube videos is enough didn't need to pay and attend courses freeCodeCamp.org is one of best youtube channel(You can also visit their website) to learn html,css,js etc.🙏🙏

[@alvarojflores]

You're already on the way my brother! If you ask, you find the answer ("I think, then I exist!").

[@hextoid]

Can any please Which software is used in this video

[@grainfrizz]

Jesus man CSS doesn't make sense at all but it's so powerful

[@rarapuff7547]

Awesome work! Thank you! But I'm very confused. The before pseudo elements are actually above the icons. If you set the original position of the before pseudo elements as: top: -10%, left: -10%, you can't even see those icons. But when you hover your mouse on and the animation plays, you can see those icons. Why?

[@michaela.thompson8986]

I seem to have done something wrong. I've copied and pasted the font-awesome link into my header and used the exact i tag class references to all the various icons, and yet all I get are empty squares on my live server page. Did I miss a step in the process? Over all, though, excellent tutorials! Really enjoy learning and following your tutorials. Please, keep adding more. Just starting out and have about 2 weeks of using ATOM and watching several tutorials from various people and groups. Thank you.

[@jairusmatthias3514]

very intelligent great job

[@lishaev4364]

Great job....

[@astrid7146]

this is amazing, thank you so much!

[@winston6416]

6 minutes and 9 seconds...nice

[@rt-x3550]

thank you for the learning. it was very helpful and easy to understand..👌😁

[@srkweb3512]

Thanks for everything

[@marcusscott4024]

Excellent mind-blowing fantastic.

[@spy3440]

U r a King of coading

[@ikeezplays981]

can I use font awesome link even though I am offline already?

[@DarkCodeOnline]

u can download the offline version

[@rathorejay2129]

Amazing dude

[@Akashkumar-ei5tm]

You are amazing bro

[@husler7424]

Prettiest video💟

[@bossysmaxx]

hey dude how your before psuedo element getting inside your icon placeholders, when I tried it it's getting out of the box.

[@bossysmaxx]

@@blazejad2772 well I found it, oveflow:hidden

[@guccigreatness4925]

awesome video bro

[@ereburg]

Sorry for bad English, but I should leave this comment. There is an issue on Safari, when I make fast mouse movement between buttons: in left bottom corner, it makes visible normally, not rounded. Seems like it can't to render in time or why, I don't know. Can you check it? Thanks in advance.

[@asifrather7110]

how can i make them responsive ? like if i click on the button , it will direct me to facebook for expemple

[@JuanseTech]

responsive is not equal at hyperlink The responsive is to adapt the design to all the screen's size. Meanwhile, the hyperlink you can do it with " Click Me! The tag "target="_blank" is for open a new window when the user click on the hyperlink, you type the link on the tag "href" it must be a complete link with all stuff, and you can type whatever you want to into de :)

[@mecil9]

Cool!!!!!! Thanks.it's very useful!

[@vppinnovation491]

Hiii awesome tutorial. Can you tell me which coding is this. And how do I learn please

[@AhmedAlaa-te6gb]

if you learn html & css you will have the basics of code that make you know to write and understand the code below.

[@vppinnovation491]

OK thanks I am start learning html

[@RoamingRebel]

superb bro .....

[@jonathan3488]

Can I use it on my website ? That's beautiful

[@댓글부대]

wow very good video ~

[@iMPenTiVVague]

Can i use this for Twitch -> Panels??

[@mongoosehog6335]

iMPenTiV_Vague I could be wrong but I think you need an image for twitch panels

[@arunrajkumard7231]

Awesome 💪💪💪

[@stevenselolo]

Beautiful

[@mohamedbenlachhebloukili6646]

Great

[@profjeb4316]

Could you make that work when offline?.. I mean if you don't have connection it's show the icon

[@DarkCodeOnline]

You should download the offline version from fontawesome

[@broreachyt3289]

or maybe you can download icon from fontawsome its works also.

[@nanayawadjeioboro132]

@@DarkCodeOnline with the offline one. I have the offline version but how do I make the reference to it can pick it from the icons and show them on my page. I mean which code will make such reference

[@jslookgood4523]

great work thanks for sharing

[@radanmitasik8793]

Awesome is this possible in vanilla javascript or javascript at all ? Maybe jquery idk..

[@craaftercraafterino]

Woow, very beautifull!

[@mentalix5995]

how can I change each icon color individually? what is the code in css?

[@mrsconsolelog]

wow ! Thanks for sharing !!

[@joshd.2209]

How to set that preview section? To see every alterations of code it will be updated

[@DarkCodeOnline]

install atom-html-preview

[@shreyasd4663]

@@DarkCodeOnline thanks for that reply! Keep doing the good work!

[@agk2011]

Great one, man.

[@gprozac]

looks great..thanks.

[@gauraphypokerboy]

Which software you are using??

[@DarkCodeOnline]

atom

[@gorkemtr]

Really good job

[@bobbyryandra]

Thanks a lot bro

[@pop.zickle]

Awesome Keep it up!🤩

[@DiverseDose24]

i am getting line under the icon. I know i am using link tad but same as your code but in your video their is no line.

[@imemplayz9263]

Use text-decoration: none; And the line will get removed

[@DiverseDose24]

iMeMPlayZ thank you very much

[@sajalchandra3959]

I am having a problem if anyone can help please comment !!!!! when i finished my code it only displays the google icon with complete animation and everything but it is covering other icons ...like it shows that its on top of facebook and others ...how to fix it ...plz help

[@kakashihatake9379]

use z-index with i element and slider element (:before) ,check this out codepen.io/kakshi97hataki/pen/WNxrgLB

[@jaydeepsinhjadavjd2686]

How can we get the code because it is not properly visible in the video

[@DarkCodeOnline]

look in description bro

[@jaydeepsinhjadavjd2686]

@@DarkCodeOnline oh yes.got it thanks

[@DarkCodeOnline]

@@jaydeepsinhjadavjd2686 welcome

[@dev.sandeepkumar]

Bhai plz btaoo AAP kis software pr coding kr rhe ho

[@dev.sandeepkumar]

Plz

[@bhupinderbhattarai244]

hey bro... can we use svg graphics instead of these link icons?

[@DarkCodeOnline]

yes

[@bhupinderbhattarai244]

@@DarkCodeOnline thanks... i've subscribed.. and will tell my whole Sem. class about your channel...

[@eljellin9306]

quedo increible

[@hosu-nyanpasu9963]

Great vid... Thanks for this one.

[@mdashiouzzaman834]

cool, man...keep it up

[@captainomega5718]

I Love You. You're awesome. Thanks alot

[@mehrshadazizi7456]

wow,great thanks bro.

[@muhammadfikriamin3168]

thanks man

[@sowbaghyavasudaven8812]

Haii u r using which platform its my big doubt.. Pls tell me

[@DarkCodeOnline]

atom

[@sowbaghyavasudaven8812]

@@DarkCodeOnline thank u .. if u want sent the link

[@sowbaghyavasudaven8812]

and also pls tell me the installing process

[@salmanefadlaoui6472]

good Job !! I have a question : is the order of commands ( css Codes) important ? because i tried to do the same what you did , but i didn't respect the order of commands ( css codes) and result was not the same as yours

[@rajab4187]

Its necessary bro U have to code in the give. order

[@bbgfxxftghjjjhbfdddddffg8139]

Thanks buddy

[@jasonborn6940]

what software do u use?

[@DarkCodeOnline]

atom

[@radboudmetselaar3415]

DarkCode What packages?