DEV Community

Cover image for How to Create Social Media Icon with Hover Animation Using HTML and CSS Only.
Ajay Sharma
Ajay Sharma

Posted on

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

#html #css #webdev

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 :-

  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>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>
Enter fullscreen mode Exit fullscreen mode 
: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;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
grahamthedev profile image
GrahamTheDev • • Edited

This is using a font, so it is not HTML and CSS only. Perhaps just adjust the title so it isn't misleading (as I am sure that isn't the intention!)

Also the text within the icons (in the span) should be .sr-only (.visually-hidden) rather than opacity: 0 so that people who use a screen reader can access the text, as some screen readers don't announce opacity: 0.

Visually Hidden class that is bullet proof

Use the following instead of opacity: 0 for items that are important to people who use a screen reader but you don't want to appear visually:

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
Enter fullscreen mode Exit fullscreen mode

As a final point on accessibility, if these are leading to social media profiles etc. then an anchor (<a>) is the correct containing element with the relevant href.

Collapse
 
ajaysharma12799 profile image
Ajay Sharma •

Hello Sir Thankyou For Information, I Will Sure Look into this and Will Correct it, as i an fresher in Web-Dev so i am currently improving myself.
Thankyou😊

Read next

devopspass profile image

Managing versions of OpenTofu, Terraform and TerraGrunt with tenv and DOP

DevOps Pass AI -

mike_andreuzza profile image

How to create a pricing slider with Tailwind CSS and Alpinejs

Michael Andreuzza -

ellis22 profile image

ES6 Spread Operator: Unleashing the Power of Modern JavaScript

Ellis -

dirheimerb profile image

Artificial Intelligence and Machine Learning in Web Development

Bradley Dirheimer -