Over here and when i hover over this we have this glowing border so in this video i'll show you how to add this effect to the elements in your website so let's get started.
right here i have created this folder called glowing border and i just opened it with vs code now let's create the necessary files so let's click on new.
File and we'll just create an html file so i'll just name it index.html and now let's create a css file so let's click on new file and i'll just name the style.css.
Or let's start with the index.html file now in vs code you have the shortcut where you can just press exclamation and press tab and you will have this basic html5 code.
Right now let's link our css file over here so i'll just type link and press tab and here in the edit file this time style.css now the html is pretty simple.
And now let's open this in our browser so i have this extension called live server installed in vs code so once you install this you can just right click over here in the html and click on open.
With live server and now we can see that our design is displayed over here in the browser right now let's go to our css and let's start styling this.
Right now here we will target the glowing card and let's set the width to 300 pixels and let's set the height to 400 pixels.
And let's set the background color to black and now let's bring this to the center so i'll just type margin and 30 pixels for top and bottom and auto for left and.
Right and let's set the color of all the text to white and let's set the font family to roboto and let's bring this text to the center.
So for that i'll just type display of Wesdigital
Flex and let's type align items to the center and justify content to the center and now let's set the font size of the.S3 inside the glowing card so let's start glowing card s3 and let's see the font size to 30.
Pixels now the next thing we will do is add this glowing effect now by default when we don't hover over this we can see that we have a little bit of blur over here.
On the sides so let's go ahead and use an after selector for that so let's type glowing card colon colon after.
And let me just explain to you what is an after element so let's type content and here if you just type one two three we can see that we have one two three written over here so after element can.
Add extra elements to the elements in your website so let's remove this one two three from here and we want to add the glowing effect now we want to position this after element relative to.
This glowing card so for that here you have to type position relative and now here we can type position absolute and let's set a height of 90 percent of.
The glowing card and let's set the width to 90 of the glowing card and let's set a background color and let's set it to a linear gradient so.
I'll just type linear gradient and for the first color i'll just type red and for the second color i'll just type blue and now we can see we have this after.
Element displayed over here now we want
This after element to be behind this glowing card so for that you have to type z index and set it to a negative value.So just type negative one and now we can see that the after element is behind this glowing card now let's add a blur effect so let's type filter and i just tap blur.
And let's set the blur to 20 pixels and now we can set the positions of left and top so let's type top and let's set the top position to 11 pixels and now we can see a little bit of red.
Displayed over here and let's set the left position and let's set it to 13 pixels you can go ahead and experiment with these values right now let's add the.
Hover effect so for that let's type glowing card colon hover column column after and when we hover over the element we.
Want to set the height to something greater than 100 so let's type 103 percent and let's set the width to 102 percent and now let's hover over this element.
And now we can see we have the glowing effect displayed over here we'll also set the left and the top positions so let's tap top and we'll set it to zero and left to zero.
And now if you hover over this we can see we have this glowing effect and let's also add a transition so that we have smooth animation so here i'll just stop transition and i'll just set.
All to 500 milliseconds is and now let's hover over this and we can see we have this glowing border so that's basically how you add glowing border to the elements in your website.
Now you can go ahead and add any content over here inside this glowing card and just go ahead and play with these values a little bit you can just change the top and the left values over here depending.
On the element to which you are adding this effect so that's basically it for this video i will leave the link of the source code in the description of this video and if you have any doubts you can.
Ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day.