How to Make Glowing Social Media Icon Using HTML and CSS Only.

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%;
    }
}

Blog

How to Make Glowing Social Media Icon Using HTML and CSS Only.

Ajay Sharma

Join Our Newsletter. No Spam, Only the good stuff.

Related