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

  Рет қаралды 458,980

DarkCode

DarkCode

Күн бұрын

Пікірлер: 388
@leeli9243
@leeli9243 6 жыл бұрын
Wow that looks amazing! Thank you darkcode!
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
Welcome
@mujeebchishti8577
@mujeebchishti8577 3 жыл бұрын
You design awesome things like buttons, menu, navigation and login page respect man... Love ❤from India 🇮🇳
@mounikagedi6610
@mounikagedi6610 6 жыл бұрын
Just now a subscriber from me..u deserve itttt!!!!!!!!!!!
@mahirfaisalarian9960
@mahirfaisalarian9960 6 жыл бұрын
Dude I just loved the video. I pray for your great future.ThankYou.👍
@AudioPervert1
@AudioPervert1 5 жыл бұрын
However amazing the animation, it does take us back to the same websites which harvest our minds, content and data.
@Science_Flow_BD
@Science_Flow_BD 6 жыл бұрын
Really,,, Awesome...Never Give up ✔
@vamsichilukuri
@vamsichilukuri 5 жыл бұрын
I'm addicted to ur channel
@nomanraju9061
@nomanraju9061 4 жыл бұрын
Best Web channel... Thanks a lot DarkcoDe Team...
@taskilmahmud8503
@taskilmahmud8503 5 жыл бұрын
Dammm one video and already a subscriber Let's hope this leads to a good journey
@ahurein1641
@ahurein1641 5 жыл бұрын
Same here...
@adityadighe1582
@adityadighe1582 4 жыл бұрын
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
@opentech9372 6 жыл бұрын
I think adding subtitle in your video or youtube will help the viewers 🙏Great tutorials
@YoYo-eg6rc
@YoYo-eg6rc 6 жыл бұрын
Yes you are right dude
@jonathan3488
@jonathan3488 5 жыл бұрын
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
@subhanalisajjad9616 4 жыл бұрын
Wow man u are really a creative hats off !!!!! But I have a small question which editor u use????
@imanueldamar
@imanueldamar 4 жыл бұрын
My first impression "MANTUL-Mantap Betul" - indonesian langue in english very nice thanks
@JamShi_Life
@JamShi_Life 6 жыл бұрын
its just awesome... which notepad did you use? and how did you make the preview tab?
@JuanseTech
@JuanseTech 5 жыл бұрын
He uses atom, with the package atom-html-preview
@sexyorchestraboy
@sexyorchestraboy 5 жыл бұрын
Thanks for your answer, I was wondering the same.
@user-z5jg3ce1j
@user-z5jg3ce1j 6 жыл бұрын
Amazing! Thank you! (P.S. Hello from Ukraine!)
@rajab4187
@rajab4187 5 жыл бұрын
Hello
@rajab4187
@rajab4187 5 жыл бұрын
I'm ur 63 subscriber
@ekowyamoah5807
@ekowyamoah5807 5 жыл бұрын
I started web development not long ago and I'm learning a lot from you thanks a lot
@unlimitedcreativity4400
@unlimitedcreativity4400 5 жыл бұрын
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
@nurulfikri2967 5 жыл бұрын
lana del rey - dark paradise
@DelaFarta
@DelaFarta 6 жыл бұрын
Thank you man, it help a lot beginners !
@kong1999
@kong1999 6 жыл бұрын
This is nice! Thank you for sharing!
@dburnside22
@dburnside22 6 жыл бұрын
That looks super sweet!
@luis96xd
@luis96xd 6 жыл бұрын
Excellent video tutorial! Thanks! :D
@Asif05288
@Asif05288 11 ай бұрын
Amazing Sir You beauty of coding world
@hvmanhabits118
@hvmanhabits118 3 жыл бұрын
MERCIII CHEF BON COURAGE ON ATTEND VOS VIDEOS TJRS 👍👍
@25inzy
@25inzy 5 жыл бұрын
Great job buddy.... Please keep it up
@peterkulik5943
@peterkulik5943 6 жыл бұрын
Your videos are awesome!
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
thank you
@manojdewangan7534
@manojdewangan7534 6 жыл бұрын
You are awesome bro!!! I really like your all videos!
@MilkyWay-ru5fx
@MilkyWay-ru5fx 4 жыл бұрын
OMG Amazing video!!!!!!!! I love this brooooooo
@mandms7686
@mandms7686 6 жыл бұрын
You got skills bro
@frontendblog1804
@frontendblog1804 5 жыл бұрын
OOH men you're so crazy! Never give up! The best
@DarkCodeOnline
@DarkCodeOnline 5 жыл бұрын
Thx
@GauravSingh-wc4hd
@GauravSingh-wc4hd 5 жыл бұрын
What text editor you are using? Nice tutorials though!! Keep it Up!!
@akionka
@akionka 5 жыл бұрын
It's atom
@bossysmaxx
@bossysmaxx 5 жыл бұрын
@@akionka yes
@akionka
@akionka 5 жыл бұрын
@@bossysmaxx Thx. I know.
@bossysmaxx
@bossysmaxx 5 жыл бұрын
@@akionka poopTheLoop
@oracle7858
@oracle7858 4 жыл бұрын
4:21 why do the squares from .btn::before appear slightly to the right of each button instead of covering the button?
@satellitesage2487
@satellitesage2487 3 жыл бұрын
Because of the text-align: center set inside of .middle
@bigdeltaguy4572
@bigdeltaguy4572 5 жыл бұрын
Your content is extremely valuable. Thankyou
@ata-uo8cm
@ata-uo8cm 3 жыл бұрын
Very Nice Video
@eliteitinerary
@eliteitinerary 4 жыл бұрын
I Love The Music And Your Social Icons Awesome Job There! Salute To You ?
@mukhtarhussain2659
@mukhtarhussain2659 5 жыл бұрын
you deserve to be subscribed (Y), good job.
@ahmadcreators8906
@ahmadcreators8906 5 жыл бұрын
thank you so much brother i learn too many things
@noobff9201
@noobff9201 6 жыл бұрын
Thank you Darkcode ....💞💞💞💞
@KnowingD
@KnowingD 6 жыл бұрын
I benefit from you so much thanks to this explanation
@vicomaya7448
@vicomaya7448 5 жыл бұрын
Thank you Guys. Excellent.
@matheussjusttino
@matheussjusttino 4 жыл бұрын
Amazing! Thanks so much for work.
@vivekkumawat6307
@vivekkumawat6307 5 жыл бұрын
Bro which text editor are you use please bro tell me
@DarkCodeOnline
@DarkCodeOnline 5 жыл бұрын
Atom
@vivekkumawat6307
@vivekkumawat6307 5 жыл бұрын
@@DarkCodeOnline thaks bro😊
@huberman-shorts-podcast
@huberman-shorts-podcast 6 жыл бұрын
Very good.. you are a master!!!
@NapoleonRoca
@NapoleonRoca 4 жыл бұрын
thank for joint your knowledge
@DarkCodeOnline
@DarkCodeOnline 4 жыл бұрын
Welcome!
@deduice
@deduice 6 жыл бұрын
Cute! Where's the simplest way to start learning coding - HTML and CSS?
@alvarojflores
@alvarojflores 6 жыл бұрын
At home, with this video tutorials, cheers!
@deduice
@deduice 6 жыл бұрын
@@alvarojflores, thanks for your reply. I'm looking for something basic for a beginner. I'm more of a designer than a coder
@deduice
@deduice 6 жыл бұрын
@@alvarojflores, thanks for your reply. I'm looking for something basic for a beginner. I'm more of a designer than a coder
@opentech9372
@opentech9372 6 жыл бұрын
@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
@alvarojflores 6 жыл бұрын
You're already on the way my brother! If you ask, you find the answer ("I think, then I exist!").
@hextoid
@hextoid 5 жыл бұрын
Can any please Which software is used in this video
@grainfrizz
@grainfrizz 6 жыл бұрын
Jesus man CSS doesn't make sense at all but it's so powerful
@rarapuff7547
@rarapuff7547 5 жыл бұрын
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
@michaela.thompson8986 4 жыл бұрын
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
@jairusmatthias3514 6 жыл бұрын
very intelligent great job
@lishaev4364
@lishaev4364 5 жыл бұрын
Great job....
@astrid7146
@astrid7146 5 жыл бұрын
this is amazing, thank you so much!
@winston6416
@winston6416 4 жыл бұрын
6 minutes and 9 seconds...nice
@rt-x3550
@rt-x3550 5 жыл бұрын
thank you for the learning. it was very helpful and easy to understand..👌😁
@srkweb3512
@srkweb3512 4 жыл бұрын
Thanks for everything
@marcusscott4024
@marcusscott4024 5 жыл бұрын
Excellent mind-blowing fantastic.
@spy3440
@spy3440 5 жыл бұрын
U r a King of coading
@ikeezplays981
@ikeezplays981 3 жыл бұрын
can I use font awesome link even though I am offline already?
@DarkCodeOnline
@DarkCodeOnline 3 жыл бұрын
u can download the offline version
@rathorejay2129
@rathorejay2129 5 жыл бұрын
Amazing dude
@Akashkumar-ei5tm
@Akashkumar-ei5tm 6 жыл бұрын
You are amazing bro
@husler7424
@husler7424 5 жыл бұрын
Prettiest video💟
@bossysmaxx
@bossysmaxx 5 жыл бұрын
hey dude how your before psuedo element getting inside your icon placeholders, when I tried it it's getting out of the box.
@bossysmaxx
@bossysmaxx 3 жыл бұрын
@@blazejad2772 well I found it, oveflow:hidden
@guccigreatness4925
@guccigreatness4925 5 жыл бұрын
awesome video bro
@ereburg
@ereburg 5 жыл бұрын
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
@asifrather7110 5 жыл бұрын
how can i make them responsive ? like if i click on the button , it will direct me to facebook for expemple
@JuanseTech
@JuanseTech 5 жыл бұрын
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
@mecil9 5 жыл бұрын
Cool!!!!!! Thanks.it's very useful!
@vppinnovation491
@vppinnovation491 5 жыл бұрын
Hiii awesome tutorial. Can you tell me which coding is this. And how do I learn please
@AhmedAlaa-te6gb
@AhmedAlaa-te6gb 5 жыл бұрын
if you learn html & css you will have the basics of code that make you know to write and understand the code below.
@vppinnovation491
@vppinnovation491 5 жыл бұрын
OK thanks I am start learning html
@RoamingRebel
@RoamingRebel 4 жыл бұрын
superb bro .....
@jonathan3488
@jonathan3488 4 жыл бұрын
Can I use it on my website ? That's beautiful
@댓글부대
@댓글부대 4 жыл бұрын
wow very good video ~
@iMPenTiVVague
@iMPenTiVVague 5 жыл бұрын
Can i use this for Twitch -> Panels??
@mongoosehog6335
@mongoosehog6335 5 жыл бұрын
iMPenTiV_Vague I could be wrong but I think you need an image for twitch panels
@arunrajkumard7231
@arunrajkumard7231 6 жыл бұрын
Awesome 💪💪💪
@stevenselolo
@stevenselolo 6 жыл бұрын
Beautiful
@mohamedbenlachhebloukili6646
@mohamedbenlachhebloukili6646 6 жыл бұрын
Great
@profjeb4316
@profjeb4316 6 жыл бұрын
Could you make that work when offline?.. I mean if you don't have connection it's show the icon
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
You should download the offline version from fontawesome
@broreachyt3289
@broreachyt3289 5 жыл бұрын
or maybe you can download icon from fontawsome its works also.
@nanayawadjeioboro132
@nanayawadjeioboro132 5 жыл бұрын
@@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
@jslookgood4523 5 жыл бұрын
great work thanks for sharing
@radanmitasik8793
@radanmitasik8793 6 жыл бұрын
Awesome is this possible in vanilla javascript or javascript at all ? Maybe jquery idk..
@craaftercraafterino
@craaftercraafterino 5 жыл бұрын
Woow, very beautifull!
@mentalix5995
@mentalix5995 4 жыл бұрын
how can I change each icon color individually? what is the code in css?
@mrsconsolelog
@mrsconsolelog 5 жыл бұрын
wow ! Thanks for sharing !!
@joshd.2209
@joshd.2209 6 жыл бұрын
How to set that preview section? To see every alterations of code it will be updated
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
install atom-html-preview
@shreyasd4663
@shreyasd4663 5 жыл бұрын
@@DarkCodeOnline thanks for that reply! Keep doing the good work!
@agk2011
@agk2011 6 жыл бұрын
Great one, man.
@gprozac
@gprozac 6 жыл бұрын
looks great..thanks.
@gauraphypokerboy
@gauraphypokerboy 6 жыл бұрын
Which software you are using??
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
atom
@gorkemtr
@gorkemtr 6 жыл бұрын
Really good job
@bobbyryandra
@bobbyryandra 5 жыл бұрын
Thanks a lot bro
@pop.zickle
@pop.zickle 5 жыл бұрын
Awesome Keep it up!🤩
@DiverseDose24
@DiverseDose24 5 жыл бұрын
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
@imemplayz9263 5 жыл бұрын
Use text-decoration: none; And the line will get removed
@DiverseDose24
@DiverseDose24 5 жыл бұрын
iMeMPlayZ thank you very much
@sajalchandra3959
@sajalchandra3959 4 жыл бұрын
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
@kakashihatake9379 4 жыл бұрын
use z-index with i element and slider element (:before) ,check this out codepen.io/kakshi97hataki/pen/WNxrgLB
@jaydeepsinhjadavjd2686
@jaydeepsinhjadavjd2686 6 жыл бұрын
How can we get the code because it is not properly visible in the video
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
look in description bro
@jaydeepsinhjadavjd2686
@jaydeepsinhjadavjd2686 6 жыл бұрын
@@DarkCodeOnline oh yes.got it thanks
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
@@jaydeepsinhjadavjd2686 welcome
@dev.sandeepkumar
@dev.sandeepkumar 5 жыл бұрын
Bhai plz btaoo AAP kis software pr coding kr rhe ho
@dev.sandeepkumar
@dev.sandeepkumar 5 жыл бұрын
Plz
@bhupinderbhattarai244
@bhupinderbhattarai244 6 жыл бұрын
hey bro... can we use svg graphics instead of these link icons?
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
yes
@bhupinderbhattarai244
@bhupinderbhattarai244 6 жыл бұрын
@@DarkCodeOnline thanks... i've subscribed.. and will tell my whole Sem. class about your channel...
@eljellin9306
@eljellin9306 5 жыл бұрын
quedo increible
@hosu-nyanpasu9963
@hosu-nyanpasu9963 5 жыл бұрын
Great vid... Thanks for this one.
@mdashiouzzaman834
@mdashiouzzaman834 6 жыл бұрын
cool, man...keep it up
@captainomega5718
@captainomega5718 5 жыл бұрын
I Love You. You're awesome. Thanks alot
@mehrshadazizi7456
@mehrshadazizi7456 5 жыл бұрын
wow,great thanks bro.
@muhammadfikriamin3168
@muhammadfikriamin3168 5 жыл бұрын
thanks man
@sowbaghyavasudaven8812
@sowbaghyavasudaven8812 6 жыл бұрын
Haii u r using which platform its my big doubt.. Pls tell me
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
atom
@sowbaghyavasudaven8812
@sowbaghyavasudaven8812 6 жыл бұрын
@@DarkCodeOnline thank u .. if u want sent the link
@sowbaghyavasudaven8812
@sowbaghyavasudaven8812 6 жыл бұрын
and also pls tell me the installing process
@salmanefadlaoui6472
@salmanefadlaoui6472 5 жыл бұрын
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
@rajab4187 5 жыл бұрын
Its necessary bro U have to code in the give. order
@bbgfxxftghjjjhbfdddddffg8139
@bbgfxxftghjjjhbfdddddffg8139 4 жыл бұрын
Thanks buddy
@jasonborn6940
@jasonborn6940 6 жыл бұрын
what software do u use?
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
atom
@radboudmetselaar3415
@radboudmetselaar3415 5 жыл бұрын
DarkCode What packages?
Awesome Social Media Buttons Using HTML CSS & JQuery
5:56
DarkCode
Рет қаралды 24 М.
Social Media Buttons with Tooltip on Hover using only HTML & CSS
8:56
人是不能做到吗?#火影忍者 #家人  #佐助
00:20
火影忍者一家
Рет қаралды 20 МЛН
Mom Hack for Cooking Solo with a Little One! 🍳👶
00:15
5-Minute Crafts HOUSE
Рет қаралды 23 МЛН
СИНИЙ ИНЕЙ УЖЕ ВЫШЕЛ!❄️
01:01
DO$HIK
Рет қаралды 3,3 МЛН
Buttons With Awesome Hover Effects Using Only HTML & CSS
5:48
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,9 МЛН
Animated Glowing Button Hover Effect using HTML & CSS
4:34
DebugSpecter
Рет қаралды 9 М.
3D Flip Card Effect On Hover Using Only HTML & CSS
7:58
DarkCode
Рет қаралды 258 М.
Creative Button Animation Effects | CSS Snake Border Animation
5:02
Online Tutorials
Рет қаралды 384 М.
How To Create Social Media Buttons Hover Effect Only HTML and CSS
6:21
10 Stunning CSS 3D Effect You Must See
3:00
Red Stapler
Рет қаралды 1,5 МЛН
Animated Navigation Bar in HTML and CSS   Menu Hover Animation Effects
3:39
El_ Shadow Academy
Рет қаралды 165 М.
人是不能做到吗?#火影忍者 #家人  #佐助
00:20
火影忍者一家
Рет қаралды 20 МЛН