Hello friends how are you , Today in this post "Neon Light Effect on Button using HTML and CSS" i am going to teach you how you apply Neon Light Effect on a Button in HTML using very simple lines of HTML and CSS code. If you wan to create something interesting using simple HTML and CSS then this post is for you.
If you want to understand this through video then watch this video i have explained it step by step live
Now i am going to explain step by step.
Step 1:Create a Folder: Just create a folder with any name and in any drive in your system, In my case my folder name is myhtml.
Step 2:Create an HTML file: Now open notepad and type the below code or you can copy this code for your personal use
<html>
<head>
<title>Neon Button</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div class="container">
<div class="button">
BUTTON
</div>
</div>
</body>
</html>
Now save this file with name myhtml.html inside the created folder [myhtml].
Step 3:Create a CSS file: Now open notepad and type the below code or you can copy this code for your personal use
body
{
margin: 0;
padding: 0;
background-color: black;
}
.container
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.button
{
position: relative;
color: cyan;
letter-spacing: 15px;
border: 5px solid cyan;
padding: 50px;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
transition: 1.5s;
border-radius:100px;
}
.button:hover
{
box-shadow: 0 5px 50px 0 cyan inset,0 5px 50px 0 cyan,
0 5px 50px 0 cyan inset,0 5px 50px 0 cyan;
text-shadow: 0 0 5px cyan;
}
After typing this code now save this file with name mycss.css inside the created folder [myhtml]. Note-Here don't change the name of this CSS file because i have linked this css file in HTML file so in case if you change this CSS file name then you must change in the HTML file.
After doing these your created folder will look like below.
Step 4:Run HTML file: Now its time to run HTML file so right click on myhtml file and then select open with and then select chrome browser or you can select any browser for output.
You will get output screen like below screenshot.
Now when you will move mouse on this button you will notice some lighting effect like below screenshot. For better experience and live result see the above video.
I hope now you can create "Neon Light Effect on Button using HTML and CSS". If you have any doubt regarding this post or you want something more in this post then let me know by comment below i will work on it definitely.
Also Visit: Music Player in Python
Request:-If you found this post helpful then let me know by your comment and share it with your friend.
If you want to ask a question or want to suggest then type your question or suggestion in comment box so that we could do something new for you all.
If you have not subscribed my website then please subscribe my website. Try to learn something new and teach something new to other.
If you like my post then share it with your friends. Thanks😊Happy Coding.
0 Comments