Hello Everyone, In this Post We Will be Seeing How to Glowing Social Media Icon Using HTML and CSS only.
Here is The Live Link of Glowing SocialMedia Page https://ajaysharma12799.github.io/Glowing-SocialMedia-Icon/
Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/
Follow Me on Github https://www.github.com/ajaysharma12799/
Steps to Create :-
- Choose Any Text Editor (VSCode Recommended).
- Create 2 Files in Current Project Directory, index.html and style.css.
- Use Below HTML and CSS Code To Build Your Page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Social Media Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="facebook"><i class="fab fa-facebook"></i></div>
<div class="instagram"><i class="fab fa-instagram"></i></div>
<div class="twitter"><i class="fab fa-twitter"></i></div>
<div class="linkedin"><i class="fab fa-linkedin"></i></div>
<div class="github"><i class="fab fa-github"></i></div>
<div class="youtube"><i class="fab fa-youtube"></i></div>
</div>
</body>
</html>
:root{
--fbColor: #4267B2;
--instaColor: #cd486b;
--twitterColor: #1DA1F2;
--linkedinColor: #0077b5;
--githubColor: black;
--ytColor: #FF0000;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #CAD5E2;
}
.container {
width: 50vw;
margin: 0 auto;
margin-top: 50vh;
display: flex;
justify-content: space-evenly;
align-content: center;
}
.fab {
border: 1px solid;
padding: 30px;
font-size: 30px;
border-radius: 50%;
cursor: pointer;
}
.fab:hover {
border: none;
animation: grow 1s infinite alternate ease-in-out
}
.facebook:hover {
background-color: var(--fbColor);
color: #fff;
border-radius: 50%;
box-shadow: 0 0 50px var(--fbColor);
}
.instagram:hover {
background-color: var(--instaColor);
border-radius: 50%;
color: #fff;
box-shadow: 0 0 50px var(--instaColor);
}
.twitter:hover {
background-color: var(--twitterColor);
border-radius: 50%;
color: #fff;
box-shadow: 0 0 50px var(--twitterColor);
}
.linkedin:hover {
background-color: var(--linkedinColor);
border-radius: 50%;
color: #fff;
box-shadow: 0 0 50px var(--linkedinColor);
}
.github:hover {
background-color: var(--githubColor);
border-radius: 50%;
color: #fff;
box-shadow: 0 0 50px var(--githubColor);
}
.youtube:hover {
background-color: var(--ytColor);
border-radius: 50%;
color: #fff;
box-shadow: 0 0 50px var(--ytColor);
}
@keyframes grow {
from {
transform: scale(1);
font-size: 30px;
}
to {
transform: scale(1.5);
font-size: 50px;
}
}
@media (max-width: 768px) {
.container {
margin: 0 auto;
display: grid;
flex-direction: column;
justify-content: center;
align-content: center;
margin-top: 5%;
margin-bottom: 5%;
}
.fab {
border: 1px solid;
padding: 30px;
font-size: 30px;
border-radius: 50%;
cursor: pointer;
}
.fab:hover {
border: none;
animation: grow 1s infinite alternate ease-in-out
}
.facebook, .instagram, .twitter, .linkedin, .github, .youtube {
margin-top: 20%;
}
}
Top comments (0)