Animated gradient buttons on hover Using HTML & CSS

◘ Like our page : / darkcode0
◘ My Instagram : / darkcodeonline
◘ Paypal donation link : paypal.me/YBenlachheb
◘ Download Files From Here : darkcode1.blogspot.com/2019/0...
◘ Code Editor : Atom
Track: Ascence - Places Like That [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Ascence - Places Like ...
Free Download / Stream: ncs.io/PlacesLikeThat

Пікірлер: 97

  • @hassuunna
    @hassuunna5 жыл бұрын

    I expected keyframes but resizing background and shifting it on hover , that's brilliant !! ❤❤

  • @mattwaters7414
    @mattwaters74145 жыл бұрын

    Cool, so simple but can add so much to a website. Thanks a lot for the videos, keep it up

  • @sachirayapa6335
    @sachirayapa63355 жыл бұрын

    Really Awesome to have someone like you do videos about these, mate. keep it up. Cheers!

  • @cainhu77
    @cainhu772 ай бұрын

    thank u so much, tried a lot of over-complicated ways but your simple way worked like a charm

  • @rakeshmanathana
    @rakeshmanathana5 жыл бұрын

    Your creations are of good quality and are very helpful for newbie front end developers like me for learning the practical usages of many concepts. Could you please make some videos making use of CSS3 grid layout?

  • @klenamglover2057
    @klenamglover20575 жыл бұрын

    Keep on killing it 🔥

  • @ibntofajjal
    @ibntofajjal4 жыл бұрын

    It's so simple but too much creative :) thank you darkcode

  • @franceleeparis37
    @franceleeparis375 жыл бұрын

    Awesome... with the split screen it’s the best design video I have seen... Guy is a genius... I want to invest in his company..🤔😀

  • @monik1070
    @monik10705 жыл бұрын

    Well done , I got many idea and inspiration from you . Thank you.

  • @oncarlos_
    @oncarlos_3 жыл бұрын

    Wow, it was so creative, congrats. 👏

  • @jonocowdery7895
    @jonocowdery78957 ай бұрын

    This was great and I'm using it on one of my sites. Thanks!

  • @ilyesmilyesm2576
    @ilyesmilyesm25765 жыл бұрын

    Wow that was beatiful and simple

  • @fuwasegu84
    @fuwasegu845 жыл бұрын

    Cool. I’ll try it!

  • @Frankslaboratory
    @Frankslaboratory4 жыл бұрын

    I love gradient effects, most of my tutorials are black and white haha

  • @tin24h30
    @tin24h305 жыл бұрын

    wow! Beautiful.

  • @suhailmughal6648
    @suhailmughal66485 жыл бұрын

    Outstanding bro :)

  • @priyanzhu
    @priyanzhu5 жыл бұрын

    Broooooooooo! it is very easy simple and easy codings i love it and it looks best.

  • @thedarkknight4077
    @thedarkknight40775 жыл бұрын

    love you brother from pakistan

  • @huyhoangsmartmoney
    @huyhoangsmartmoney5 жыл бұрын

    Awesome !

  • @dharmeshpanchal4864
    @dharmeshpanchal48645 жыл бұрын

    Perfect style

  • @e.zarate
    @e.zarate5 жыл бұрын

    Epic!

  • @cryptocurrencyog
    @cryptocurrencyog5 жыл бұрын

    Great job.

  • @yashwanthmy8198
    @yashwanthmy81985 жыл бұрын

    Luv your videos

  • @Hotatoes
    @Hotatoes5 жыл бұрын

    Nice and fast bro thanx

  • @sudeep.g
    @sudeep.g5 жыл бұрын

    Thanks a lot! Was looking for a gradient tutorial And instead of writing btn1 btn2 you could have gone for nth-child though

  • @VipinMishraVm

    @VipinMishraVm

    5 жыл бұрын

    Always think practically 🙂 Yes, we can obviously target them with the nth-child selector but think about a situation where we want to add another button between 1st and 2nd one.. Not just a button, what if we want to insert a div in between? Layout will break. But with class, no worries.

  • @Ro_V_oR

    @Ro_V_oR

    3 ай бұрын

    @@VipinMishraVm very true

  • @user-tf7te5fs2n
    @user-tf7te5fs2n5 жыл бұрын

    very nice . Thanks a lot

  • @MM201K
    @MM201K5 жыл бұрын

    Beautiful

  • @JNET_Reloaded
    @JNET_Reloaded5 жыл бұрын

    Very Nice.

  • @gmusic4243
    @gmusic42435 жыл бұрын

    Muy bien 😁

  • @KennyCu_
    @KennyCu_5 жыл бұрын

    Love ur vids man , im from portugal

  • @VanStabHolme

    @VanStabHolme

    5 жыл бұрын

    i'm from earth

  • @KennyCu_

    @KennyCu_

    5 жыл бұрын

    Трепещущий Мозг im from “i ask u something”?

  • @VanStabHolme

    @VanStabHolme

    5 жыл бұрын

    @@KennyCu_ maybe

  • @juraev0056
    @juraev00565 жыл бұрын

    Awesome videos

  • @nicecu3286
    @nicecu32865 жыл бұрын

    i love channel

  • @Jenildhaduk
    @Jenildhaduk8 ай бұрын

    thanks brother ❤

  • @hugosoderstrom6330
    @hugosoderstrom63304 жыл бұрын

    very cool

  • @MrStreamer
    @MrStreamer4 жыл бұрын

    Absolutely Nice Video Bro....Can u make a video how to link that loading screen to the website....Loading screen that u showed in another video....Please....I tried a lot but didn't succeed....Hope you reply soon...

  • @xyran1438
    @xyran14385 жыл бұрын

    First 🥳

  • @serioussam9400
    @serioussam94005 жыл бұрын

    add background-position in transition before 0.6s if you don't want the button animated at first.

  • @javierserna6631
    @javierserna66315 жыл бұрын

    Hey bro, your work os awesome.🇪🇦, Which programs use for? Sublime and? Thanks

  • @ravindutharaka519
    @ravindutharaka5192 жыл бұрын

    Thank you ❤❤

  • @zubairzubii86
    @zubairzubii86 Жыл бұрын

    thank you soo much

  • @syediqbalahmed3176
    @syediqbalahmed31764 жыл бұрын

    good...

  • @mofiathamin4908
    @mofiathamin49085 жыл бұрын

    Nice

  • @maithreyeedn8608
    @maithreyeedn86082 жыл бұрын

    Thank you

  • @yousefelshabasy9516
    @yousefelshabasy95165 жыл бұрын

    nice

  • @boyyyko
    @boyyyko5 жыл бұрын

    Beauty

  • @jssytb
    @jssytb4 жыл бұрын

    I need help, if you put a gradient theme in there plus an actual image in there what do I do?

  • @user-fd6uo1pr5v
    @user-fd6uo1pr5v5 жыл бұрын

    Klass

  • @arjunmalhotra1222
    @arjunmalhotra12225 жыл бұрын

    thanks

  • @bayuyudhasaputra3169
    @bayuyudhasaputra31694 жыл бұрын

    when I have followed the code that you created using visual studio code, there is an error massage like this: "semi-colon expected css(css-lcurlyexpected) [28,18]" Why?

  • @abdullah-ue7ul
    @abdullah-ue7ul5 жыл бұрын

    Can you please make a tutorial for like and dislike options?? Please!!!😔

  • @Hakvibe.
    @Hakvibe.2 жыл бұрын

    thank you sir for very easy tutorial 🤩🤩

  • @user-fh7sm3rr4m
    @user-fh7sm3rr4m5 жыл бұрын

    You are genius! Can you tell us how , when you click btn, to go somewhere else in your website?

  • @lupi5190

    @lupi5190

    5 жыл бұрын

    google it, is pretty simple...

  • @ripjoe.-_-.

    @ripjoe.-_-.

    5 жыл бұрын

    just use the a tag in html do u even know how to use html good?

  • @owenwei9561
    @owenwei95615 жыл бұрын

    hello, sir or miss, can i request to know what application or compiler you using, thanks

  • @lupi5190

    @lupi5190

    5 жыл бұрын

    He uses Atom

  • @dima_govnomych
    @dima_govnomych3 жыл бұрын

    Can you tell me Why did u use "transform:translate(-50%, -50%)? I mean for what thanks!

  • @rianmarza2835
    @rianmarza28355 жыл бұрын

    can we use another software ? like sublime ,etc ?

  • @lupi5190

    @lupi5190

    5 жыл бұрын

    Obvious

  • @akshaydukare2496
    @akshaydukare24964 жыл бұрын

    How to use that div shortcuts by using class name

  • @sreekarthik6645
    @sreekarthik66453 жыл бұрын

    I can't apply little changes in your CSS file ... Why???

  • @salamigd7242
    @salamigd72425 жыл бұрын

    What software are you using?

  • @bayuyudhasaputra3169

    @bayuyudhasaputra3169

    4 жыл бұрын

    Atom.io

  • @PriyankaKumari-kn2dv
    @PriyankaKumari-kn2dv5 жыл бұрын

    hloo sir im new in this field.... plzz guide me.. any email or other contact information jis pr aapse bat ho skti ho...

  • @solankiketindra4919
    @solankiketindra49195 жыл бұрын

    How to use Google Drive video in blogger post. With thumbnail....? Please code..

  • @FutureAIDev2015
    @FutureAIDev20155 жыл бұрын

    What editor do you use?

  • @yazansami1737

    @yazansami1737

    5 жыл бұрын

    Atom

  • @qtromf4011
    @qtromf40114 жыл бұрын

    Why did I do the same video but it didn't work? Or is there any css to support this ??

  • @opedroheen

    @opedroheen

    3 жыл бұрын

    I have the same problem

  • @AnimeCartoonTelugu
    @AnimeCartoonTelugu Жыл бұрын

    How to add in blogger post please tell

  • @Marian_ELCarnal
    @Marian_ELCarnal5 жыл бұрын

    Hey which HTML preview tool you use?

  • @dmytrosvitlyk3295

    @dmytrosvitlyk3295

    5 жыл бұрын

    LiL Musk, it is plugin for “Atom” atom.io/packages/atom-html-preview

  • @scumathematics5105
    @scumathematics51055 жыл бұрын

    bro, how can i find your code editor.... please tell me. i will wait for ur answer. i love ur code.... from bangladesh

  • @Heirokos

    @Heirokos

    5 жыл бұрын

    its atom.io

  • @scumathematics5105

    @scumathematics5105

    5 жыл бұрын

    thx.bro... i have been watching ur video since i started web degian.

  • @gixxerblade

    @gixxerblade

    5 жыл бұрын

    I use vscode.

  • @mohammadsabaq1948

    @mohammadsabaq1948

    5 жыл бұрын

    @@gixxerblade how about sublime

  • @varadkulk
    @varadkulk5 жыл бұрын

    Please put your code on GitHub

  • @trapwaveshd1072
    @trapwaveshd10725 жыл бұрын

    How to anmi lod page

  • @AnimeCartoonTelugu
    @AnimeCartoonTelugu Жыл бұрын

    How to use bro

  • @ujjwalgupta1269
    @ujjwalgupta12694 жыл бұрын

    after hover nothing happen

  • @Keziasharma1373

    @Keziasharma1373

    26 күн бұрын

    Yes

  • @samehnabl1453
    @samehnabl14535 жыл бұрын

    i need link color web..?1 please pro

  • @munawarhassan8929
    @munawarhassan89293 жыл бұрын

    color source??

  • @SD-vs3ms
    @SD-vs3ms4 жыл бұрын

    What is the purpose of transform: translate (-50%, -50%);

  • @mikefreeman3050

    @mikefreeman3050

    4 жыл бұрын

    Free Willy After using “left:50%” and “top:50%” the .container will be center in the middle of its parent (the body in this case). But only problem is that it happened from the top left corner of the .container. What we actually want is the center of the .container to be in the center of the body (the parent element) So transform: translate(-50%,-50%) tells .container to move to the left by 50% of its own width and also move to the top by 50% of its own height. Check this post for more information stackoverflow.com/questions/46184458/transform-translate-50-50/46184660

  • @SD-vs3ms

    @SD-vs3ms

    4 жыл бұрын

    @@mikefreeman3050 a very clear explanation. Thank you

  • @chirilcugureanu1853
    @chirilcugureanu18534 жыл бұрын

    Are you French ?

  • @kukuha2899
    @kukuha28995 жыл бұрын

    What IDE do you use?

  • @dmytrosvitlyk3295

    @dmytrosvitlyk3295

    5 жыл бұрын

    Cha Vo, atom.io

  • @davesaldub7690
    @davesaldub76905 жыл бұрын

    How many times are you going to spell "container" wrong lol

  • @DarkCodeOnline

    @DarkCodeOnline

    5 жыл бұрын

    Hahahha xD