CSS Neon Icons.Today in this blog, we gonna learn about CSS Neon Icons for Beginners.
CSS Neon Icons
Hi Friends!
Today in this blog, we gonna learn about CSS Neon Icons for Beginners. Social Media Icons are one of the main parts of the website. Because we will add social media icons to follow us. So, Social Media Icons will be an attractive thing on the website. this is my first Social Media Icon Effect. it's easy to learn So, learn it carefully.
This Neon Icon is nice to see on our websites. In the previous blog, we will learn about CSS Button Hover Effect For Beginners if you're a beginner I will recommend learning that button effect first. If you learn that and this blog will help you to learn about Neon Icons. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css neon icons</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<img src="facebook.png" id="img1">
<img src="linkedin.png" id="img2">
<img src="twitter.png" id="img3">
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with an extension. HTML. This extension is more important for creating a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
img{
background-color: black;
height: 100px;
width: 100px;
margin: 100px;
border-radius: 10px;
cursor: pointer;
}
#img1:hover{
background-color: blue;
border: 2px solid blue;
box-shadow: 1px 1px 60px blue,
1px 1px 120px blue;
}
#img2:hover{
background-color: coral;
border: 2px solid coral;
box-shadow: 1px 1px 60px coral,
1px 1px 120px coral;
}
#img3:hover{
background-color: dodgerblue;
border: 2px solid dodgerblue;
box-shadow: 1px 1px 60px dodgerblue,
1px 1px 120px dodgerblue;
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called. CSS. This will help you to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn it carefully. repeat the code for your practice this will help you to learn these Neon Icons effectively and This video is also helpful to learn faster. colourful Neon Icons are easy to attract viewers to websites. I hope this tutorial will be helpful for learning the button effect for beginners. I will give you Source Code and you can download it.
COMMENTS