Social Media Icons Hover Effect Using HTML & CSS

Amazing Social Media Icons Hover Effect Using HTML & CSS.

Icons Hover Effects!!!

We’ve all been there. You have a blog, a website, and all you need is social icons for people to follow you. You drag them but for some reason, your fancy little icon does not have the hover effect.

This is where this tutorial will come in handy (just for you!). I’ll show you an easy way to add a hover effect on top of those nifty social media icons!

In this tutorial, you will learn how to add a hover effect to social media icons that are placed in your website header.

Let’s get started.

Here are a couple of related posts you may find helpful, too:

  1. 15 Amazing CSS Image Hover Effects Zoom, Rotate, Slide.
  2. How to create a Rainbow Border button with HTML and CSS?
  3. Tabnine is the new way to write code faster with AI in 2022
  4. The 10 Best Chrome Extensions for the Developer

Preview of Social Media Icons Hover Effect

To create Social Media Icons Hover Effect we have used Font Awesome. If you don’t know about Font Awesome then Font Awesome is a widely-used icon set that gives you scalable vector images that can be customized with CSS.

You have to add this to your HTML page in the head tag.

How to get Font Awesome Kit’s Code

It’s very simple. You have to log in to Font Awesome site and they will provide you Kit’s Code. Just see the image it looks like that.

Icons Hover Effects

HTML Code

<!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 Icons Hover Effect</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/cad5595faf.js" crossorigin="anonymous"></script>
</head>

<body>
    <a href="#" class="card">
        <i class="fab fa-instagram"></i>
    </a>
    <a href="#" class="card">
        <i class="fab fa-facebook"></i>
    </a>
    <a href="#" class="card">
        <i class="fab fa-whatsapp"></i>
    </a>
    <a href="#" class="card">
        <i class="fab fa-twitter"></i>
    </a>

</body>

</html>

CSS Code

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #171717;
}

.card{
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.144);
    border-radius: 10px;
    box-shadow: 0 20px rgba(0,0,0,0.205), inset 0 20px 20px rgba(253,253,253,0.205);
    margin: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 2em;
    color: rgba(255, 255, 255, 0.336);
    position: relative;
    transition: box-shadow .4s, color .8s, transform .4s; 
}

.card:hover{
    color: #ffffff;
    box-shadow: 0 20px 20px rgba(0,0,0,0.205),
                inset 0 20px 10px rgba(255, 255, 255, 0.287), 
                inset 10px 0 20px rgb(255,58,58),
                inset -20px 0 20px rgb(104,255,58),
                inset -30px 0 20px rgb(71, 58, 255);

    transform: translateY(-10px);
}

Conclusion

We hope that you have enjoyed this tutorial! Please feel free to leave your comments and/or suggestions on how this code can be improved.

If you’d like to see some more tutorials, be sure to read more blogs so you can keep you up to date with the latest design tutorials and tricks.

To contact me here’s my Instagram link: untied_blog

Read more

  1. how to get rich by coding? I make $100 every month from coding
  2. How To Create An App Without Coding| Build an App In 5 Minutes
  3. 11 Amazing ReactJS Projects Ideas For Beginners with Source Code
  4. How To Answer “Tell Me About Yourself”| Interview Questions.
  5. How To Answer “Strengths And Weaknesses” (Interview Questions)
  6. “Why Should We Hire You” 7+ Best Answers Examples

2 thoughts on “Amazing Social Media Icons Hover Effect Using HTML & CSS.”

  1. Pingback: Cheap Jordans Free Shipping

  2. Pingback: cheap jordans 6

Leave a Comment