0:00
Hi guys, welcome back to my new video and today in this video you will learn how to make a neon text effect using HTML and CSS
0:09
We will create this toggle option using JavaScript when I click here it becomes normal text and when I click again it becomes Neon Style text and the text is also changing on click
0:21
So before starting this video please hit the like button and subscribe to my channel easy tutorials if you are new on my channel
0:28
Now let's start this video. Here I have this folder and in this folder I have two files, one is index.html and another one is style.cass
0:40
Now I will open my text editor which is brackets editor. So this is the HTML file
0:47
I have written basic HTML structures and this one is the CSS file
0:53
Here I have added link to connect the HTML file with the CSS file
0:57
Now in the body tag I'll write H1 and the title closed
1:03
Let's open the HTML file with any web browser. I will open with Google Chrome
1:08
You can see this title on the complete web page Now we have to align it in the center so let's come back and come to the CSS file here. We'll write body
1:19
For this one we'll set the font family Then display will be flex justify content center align a body
1:28
Items, center and background. It will be black. Mean height, 100 VH
1:40
Let's open the webpage and you can see the complete web page is black
1:45
You can't see the text because text color is also black. So we have to change the text color
1:49
So just come back and here we will write H1. For this title we will add font size 1
1:57
130 pixel then font weight it will be 200 pixel color It will be white and let add some padding
2:13
40 pixel 60 pixel and 55 pixel. Then we will add border
2:24
It will be 4 pixel solid and white color. Cursor will be pointer
2:34
Let's refresh the webpage and you can see this text and horizont
2:42
Next we have to add the Neon style on this text So let's come back and here in this title let's add one class name
2:57
so the class name I'm adding neon copy this one and write it here in the CSS file we can write the neon effect CSS in the H1
3:08
also but we will add the neon effect and we will remove it that's why we are adding
3:13
one class name so in this one we will add text shadow and add the shadow
3:29
After adding these multiple text shadow, let's press the web page and you can see text shadow over here next we have to add the shadow
4:06
for the complete box so let add box shadow over here and add these values
4:37
Now you can see blue color side up for this border. Now, you can see if I click here, nothing is happening
5:11
So we will add and remove this effect. So just come back and here we will create a script
5:17
And come to this title here, let's add one ID. So let me write the ID, BTN
5:29
In this script, write where BTN equal to document. Dot get element by ID and add the ID which is BTN
5:37
Next we will add BTN.on click equal to function. And in this one we will add the class name
5:57
So let's remove this class name from here. And in this function we will add
6:07
BTN. Classlist.ddd. And the class name which is Neon so after adding this let refresh the web page
6:23
and you can see this text is normal and when I click here it becomes a neon
6:29
style text so again the second click is not working here only one time we can
6:35
click and you can see this effect so we have to remove this effect also so let's
6:39
come back and let's remove this line and here we will write
6:43
condition which is if condition and here let's add if btn.classlist dot contains neon so if the
6:53
neon class is already there so it will remove that so here I'm adding btn.classlist
7:01
dot remove neon next we will write else conditions suppose neon class name is not
7:09
present so it will add it so btn dot class list dot add
7:13
and the class name Neon. After adding this, let's refresh the page again
7:24
Now you can see if I click it become Neon and if I click again it��
7:28
it becomes normal. So this click is working fine. Now we have to change the text also
7:36
For that let's come back and here in this if condition we will add BTN
7:42
inner HTML equal to we will write text so it is closed and in the else condition
7:52
let's copy the same thing and paste it here in the else condition and write
7:57
different text which is open that's it after adding this you can see if I click
8:01
here it is open again click and closed so this click event and neon style effect
8:09
is working fine I hope this video will be helpful for you if If you have any question, you can ask me in the comments section and please like and share this video
8:18
And please subscribe to my channel AG Tutorials to watch more videos like this one
8:22
Thank you so much for watching this video
