How to create a GRADIENT BORDER in CSS Tutorial

[@NisarFoodShow]

The work is awesome ❤ nice work bro❤

[@Adarsh-d4y8]

how do you able to make this types of css bro this is increadable plese let me know how do you these much proficiency in css

[@sublimemmNoLink]

Just FYI to everyone, magic numbering the width and height is a pretty bad solution and you would need different magic numbers for every button. If there is more text in the button it will be wider and give you more border on the x axis, so you'll have to lower your magic number.
A much... much better approach is to use negative margin,
button::after{
content: '';
position: absolute;
inset: 0;
margin: -0.2rem;
border-radius: 1000px;
background-image: linear-gradient(to bottom right, #008cff, #e100ff);
z-index: -1;
}
this button will have the same border thickness, no matter how tall or wide the button is.
instead of width and height of 100% btw, just use inset: 0, it means the same thing but is less code.

[@sublimemmNoLink]

also with inset: 0, you dont need to make the button a display flex or set the justify center or align items

[@netheritecake]

this is actually extremely helpful, thank you.

[@SB-wn3gl]

I made gradient button in c++

[@ginger8682]

Thats a flex

[@SB-wn3gl]

@@ginger8682 yes

[@sanataniengineer4074]

😂

[@SB-wn3gl]

@@sanataniengineer4074 what ?

[@over_kill]

YOU WHAA💀💀💀💀💀

[@nicoborromeo1150]

This was very helpful!

[@ZAKI-ks1qj]

3:08 can somebody explain when we set the z-index to zero in the hover part why the text wasn't covered by the pseudo element?

[@alimansimov1929]

I would like to know its why too

[@xoy5]

rel

[@stephanieapenas1734]

I was having conflict with transform: translate(). After deleting it and using another method it was working

[@serious_17]

@Programming-m5t when : :before or : : after pseudo-element is on top of the button it does not work as we expect it to, it does not hide the text inside of the button , the text always stay on top (I am only talking about the pseudo elements mentioned, I don't know how others work).

[@idohan4513]

stacking context

[@pyaephyo8108]

Thank Sir❤

[@anujchaurasia002]

Thanks for making this video 👍👍

[@noumbissistael1470]

I didn't understand the z-index of 0 please
But it's an awesome video

[@TALOB123]

It's ezy

[@TALOB123]

When ever you hover z index-1 will turn into z index- 0

[@sublimemmNoLink]

@@TALOB123 the z index of the button is already 0, in the video the z index of the PSEUDO element is set to -1. To noumbissistael's point, that is super confusing and why setting the index of the button to 0 is not explained at all in the video. The reason it works is probably because setting z index to any value creates a new stacking context, even though you're setting it from 0 to 0.

[@IslamicReminder486]

i did the same thing but it is not showing my border image why?

[@Noname-wj7dw]

Me too. I solved, maybe the button is on a navbar whit a “relative” position on the “absolute” position of the “after::button”. So, i solved by putting the navbar at z-index: 1 and leave the “after::button” at z-index -1.

[@priyanshumalusare8257]

Very well explained

[@ndeyamienjie742]

it worked on my computer but not on my laptop,but still thx for the vid

[@apkcricket2.0]

level ustad g

[@xa-27-animesh3]

It would be really great if u could share the source code so that we can take a look at it

[@merictunc]

perfect explanation thx

[@ehabelbrolosy6877]

nice work man

[@spidysense7754]

Subscribed👍

[@mr.k_162]

How can we do transition with gradient?

[@oppenheim9406]

can u make it transparent ? i mean the bg transparent

[@yamigamer1175]

Can u use transition 0.5 or doesn't work

[@alimansimov1929]

Very good keep going

[@ripisdead8534]

why doing this when u can do border image?

[@DevoAjit]

Done it 🎉

[@josyafritudemedia551]

Simple ✅✅🙏

[@ITSPHERE-ww6mi]

thanks

[@jeyceejeyka]

hey legs be friends in coding

[@kaiuniversegames]

👌👌🔥🔥

[@reanwithkimleng]

Moreeeee❤

[@xoy5]

cool af

[@AiExplainedd]

thankyou