How to Make Glowing Social Media Icon Using HTML and CSS Only.
Tags: html, css, webdev
Published: 2021-07-09 12:00:15

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 :-
1. Choose Any Text Editor (VSCode Recommended).
2. Create 2 Files in Current Project Directory, index.html and 
   style.css.
3. 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%;
    }
}
```