Neumorphism Hover Effect on Social Media Icons CSS | Neumorphism Hover Animation

In this tutorial we'll discuss How to create neumorphism social media icons design using HTML and CSS.

Neumorphism Hover Effect on Social Media Icons CSS | Neumorphism Hover Animation | TheProviders

In this tutorial we'll discuss How to create neumorphism social media icons design using HTML and CSS. Neomorphism UI design for specially for beginner. How to make neumorphism social icons with html and css.

Let's Design a Nemorphism Social Media Icons.

HTML

                            
                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphism Social Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" />
</head>
<body>  
    
        <div class="icon-container">
            <a href="#" class="icon-link facebook">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="#" class="icon-link twitter">
                <i class="fab fa-twitter"></i>
            </a>
            <a href="#" class="icon-link instagram">
                <i class="fab fa-instagram"></i>
            </a>
            <a href="#" class="icon-link linkedin">
                <i class="fab fa-linkedin-in"></i>
            </a>
        </div>

</body>
</html>

Let's write CSS and make it Awesome Neumorphism Icons.

                            
                                <style>

        :root{
            --bg-color: #e0e5ec;
            --main-color: #3f4e6d;
            --shadow-light: #ffffff;
            --shadow-dark: #a3b1c6;
        }
        body{
            background-color: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .icon-container{
            display: flex;
            gap: 2rem;
        }
        .icon-link{
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--bg-color);
            border-radius: 50%;
            text-decoration: none;
            color: var(--main-color);
            font-size: 2.5rem;
            box-shadow: 8px 8px 16px var(--shadow-dark) , -8px -8px 16px var(--shadow-light);
            transition: all 0.3s ease-in-out;
        }
        .icon-link:hover{
            box-shadow: inset 6px 6px 12px var(--shadow-dark) , inset -6px -6px 12px var(--shadow-light);
            transform: scale(0.95);
        }
        .icon-link.facebook i{ color : #3b5998}
        .icon-link.twitter i{ color : #00acee}
        .icon-link.instagram i{ color : #C13584}
        .icon-link.linkedin i{ color : #0e76a8}

</style>

Download Code Files