How to create a GRADIENT BORDER in CSS Tutorial

👉 Get the best web hosting to deploy your websites: www.hostinger....
✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more
In this HTML and CSS Tutorial you will learn how to apply a gradient to a border and how to create a glow gradient hover effect with the box-shadow property. This modern CSS button design can be implemented on any website you want. Since it is not possible to use the linear-gradient() method on the border property or the box-shadow, we are going to use a ::after pseudo-element to create the gradient border.
👉 Get our HTML5 Course on Udemy: www.udemy.com/...
#webdevelopment #csshovereffect #csstutorial
Contents of this video:
How to create a gradient border in css
How to use the ::after pseudo-element in css
How to use the linear-gradient method in css
How to create a button hover effect
How to create a glow effect in css
How to apply a gradient to a shadow in css
👍 Like and Subscribe if you enjoyed the video 😉

[@NisarFoodShow]

The work is awesome ❤ nice work bro❤

[@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💀💀💀💀💀

[@anujchaurasia002]

Thanks for making this video 👍👍

[@apkcricket2.0]

level ustad g

[@pyaephyo8108]

Thank Sir❤

[@ndeyamienjie742]

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

[@priyanshumalusare8257]

Very well explained

[@ehabelbrolosy6877]

nice work man

[@merictunc]

perfect explanation thx

[@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.

[@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

[@Chaitanya-jc]

thank you for sharing your valuable information.. please do more videos on CSS bro. we want to learn.

[@xa-27-animesh3]

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

[@oppenheim9406]

can u make it transparent ? i mean the bg transparent

[@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.

[@spidysense7754]

Subscribed👍

[@alimansimov1929]

Very good keep going

[@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.

[@ITSPHERE-ww6mi]

thanks

[@jeyceejeyka]

hey legs be friends in coding

[@mr.k_162]

How can we do transition with gradient?

[@DevoAjit]

Done it 🎉

[@josyafritudemedia551]

Simple ✅✅🙏

[@yamigamer1175]

Can u use transition 0.5 or doesn't work

[@kaiuniversegames]

👌👌🔥🔥

[@reanwithkimleng]

Moreeeee❤

[@ripisdead8534]

why doing this when u can do border image?

[@xoy5]

cool af