How to Create Social Media Icon with Hover Animation Using HTML and CSS Only.

Hello Everyone, In this Post We Will be Seeing How to Create Social Media Icon with Hover Animation Using HTML and CSS only.

Here is The Live Link of Page https://ajaysharma12799.github.io/Social-Media-Icon-with-Hover-Animation/

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>Social Media Icon with Hover Animation</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="button">
            <div class="icon">
                <i class="fab fa-facebook"></i>
            </div>
            <span>Facebook</span>
        </div>
        <div class="button">
            <div class="icon">
                <i class="fab fa-twitter"></i>
            </div>
            <span>Twitter</span>
        </div>
        <div class="button">
            <div class="icon">
                <i class="fab fa-linkedin"></i>
            </div>
            <span>LinkedIn</span>
        </div>
    </div>
</body>
</html>

:root {
    --facebookColor: #4267B2;
    --twitterColor: #1DA1F2;
    --linkedinColor: #0077b5;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #CAD5E2;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10vh;
}
.fab {
    font-size: 5rem;
}
.button{
    float: left;
    cursor: pointer;
    overflow: hidden;
    margin-top: 5%;
    transition: all .5s ease;
}
.button .icon {
    display: inline-block;
    text-align: center;
    width: 100%;
}
.button > span {
    opacity: 0;
    font-size: 25px;
}
.button:nth-child(1):hover {
    background-color: var(--facebookColor);
    color: #fff;
    border-radius: 10px;
    padding: 7px;
    text-align: center;
    padding: 20px;
    transition: all .5s ease;
}
.button:nth-child(2):hover {
    background-color: var(--twitterColor);
    color: #fff;
    border-radius: 10px;
    padding: 7px;
    text-align: center;
    padding: 20px;
    transition: all .5s ease;
}
.button:nth-child(3):hover {
    background-color: var(--linkedinColor);
    color: #fff;
    border-radius: 10px;
    padding: 7px;
    text-align: center;
    padding: 20px;
    transition: all .5s ease;
}
.button:nth-child(1):hover > span {
    opacity: 1;
    color: #fff;
    position: relative;
    top: 10px;
    border-bottom: 1px solid yellow;
    transition: all .5s ease;
}
.button:nth-child(2):hover > span {
    opacity: 1;
    color: #fff;
    position: relative;
    top: 10px;
    border-bottom: 1px solid yellow;
    transition: all .5s ease;
}
.button:nth-child(3):hover > span {
    opacity: 1;
    color: #fff;
    position: relative;
    top: 10px;
    border-bottom: 1px solid yellow;
    transition: all .5s ease;
}

Blog

How to Create Social Media Icon with Hover Animation Using HTML and CSS Only.

Ajay Sharma

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

Related