Thu May 04 2023

How to Create Eye-Catchy Media Icon Buttons with Hover Effect

CSS194 views

In today's digital world, eye-catching media icon buttons are essential for any website. They add aesthetic appeal, enhance the user experience, and make it easier for visitors to navigate to your social media platforms. With a hover effect on the social media icon buttons not only improves interactivity but also grabs attention, making your website more dynamic. In this article, I’ll show you steps to create eye-catching media icon buttons with hover effects using only HTML and CSS.

Step 1: Basic HTML Structure

To start with, create a basic HTML structure that includes a list of social media icons. Here I use SVG icons, you can get free SVG icons from webgraphriz.com.

<nav>
    <a class="facebook">
        <svg viewBox="0 0 126.22 246"><path d="M173.6,27h35.92V70.19h-29.7c-15,2.39-14,19.79-14,19.79v29.33h47.27l-7.05,47.52H166.33V273H119.19V166.09H86.89V119.31h32.3V87.74A68.5,68.5,0,0,1,127,55.49c5.27-9.87,14-20.18,28.41-25.47A53,53,0,0,1,173.6,27Z" transform="translate(-86.89 -27)"/></svg>
    </a>
    <a class="twitter">
        <svg viewBox="0 0 245.97 198.8"><path d="M44.28,59.23S89.07,113,147.62,111C140.12,86,172.14,21.7,234,65.49c0,0,24.77-5.26,32.28-12.51,0,0-3.5,14.76-20.77,27.52,0,0-1.25,2.5,27.53-6.76,0,0-12.27,16.77-25.28,26,0,0,7.18,101-91.91,141,0,0-60.72,26.69-128.79-14,0,0,40.71,6.67,74.4-20.69,0,0-38.36-3.67-46.37-35.36,0,0,13.35,3.67,22-1,0,0-36-4-39.7-49.71,0,0,17,7.33,22.35,6.33C59.71,126.37,23.85,104.52,44.28,59.23Z" transform="translate(-27.01 -50.6)"/></svg>
    </a>
    <a class="linkedin">
        <svg viewBox="0 0 244.65 226.28"><path d="M35.73,81.63a24.22,24.22,0,0,1-8-18.5,24.59,24.59,0,0,1,8-18.79q8.06-7.47,20.76-7.48,12.43,0,20.48,7.48a24.59,24.59,0,0,1,8,18.79,24.22,24.22,0,0,1-8,18.5q-8,7.5-20.48,7.49Q43.79,89.12,35.73,81.63ZM80.5,105.51V263.14H32.2V105.51Z" transform="translate(-27.68 -36.86)"/><path d="M255.8,121.75q16.51,17.94,16.52,49.3v92.09h-48v-85.6q0-15.81-8.19-24.57t-22-8.76q-13.84,0-22,8.76t-8.2,24.57v85.6H115.53V105.51h48.31v20.9a51.15,51.15,0,0,1,19.78-16.53,63,63,0,0,1,28-6.07Q239.27,103.81,255.8,121.75Z" transform="translate(-27.68 -36.86)"/></svg>
    </a>
    <a class="instagram">
        <svg viewBox="0 0 246.15 246.15"><path d="M201,51.5A47.49,47.49,0,0,1,248.41,99V200.88A47.49,47.49,0,0,1,201,248.32H99a47.49,47.49,0,0,1-47.44-47.44V99A47.49,47.49,0,0,1,99,51.5H201m0-24.66H99A72.11,72.11,0,0,0,26.92,99V200.88A72.12,72.12,0,0,0,99,273H201a72.12,72.12,0,0,0,72.11-72.11V99A72.11,72.11,0,0,0,201,26.84Z" transform="translate(-26.92 -26.84)"/><path class="cls-1" d="M150,124.34a25.57,25.57,0,1,1-25.57,25.57A25.6,25.6,0,0,1,150,124.34m0-24.66a50.24,50.24,0,1,0,50.23,50.23A50.23,50.23,0,0,0,150,99.68Z" transform="translate(-26.92 -26.84)"/><circle class="cls-1" cx="189.98" cy="55.33" r="13.81"/></svg>
    </a>
</nav>

Step 2: Adding CSS Styles

Now, let’s add CSS to style the social media buttons with the hover effect.

a {
            width: 80px;
            height: 80px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 100%;
            box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
            position: relative;
            transition: 0.3s all ease-in-out;
}

a:hover {
            background-color: transparent;
}

a::before {
            content: '';
            position: absolute;
            border-radius: 100%;
            width: 0;
            height: 0;
            background-color: #fff;
            transition: 0.3s all ease-in-out;
            z-index: 1;
}

a:hover::before {
            width: 100%;
            height: 100%;
}

a.facebook:hover::before {
            background-color: var(--facebook);
}

a.twitter:hover::before {
            background-color: var(--twitter);
}

a.linkedin:hover::before {
            background-color: var(--linkedin);
}

a.instagram:hover::before {
            background-color: var(--instagram);
}

a::after {
            content: '';
            position: absolute;
            border-radius: 100%;
            width: 0;
            height: 0;
            z-index: 1;
            transition: 0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: #fff solid 3px;
}

a:hover::after {
            width: 120%;
            height: 120%;
}

a svg {
            width: 30px;
            height: 30px;
            position: relative;
            z-index: 10;
}

a svg path,
a svg circle {
            transition: 0.3s all ease-in-out;
}

a:hover svg path,
a:hover svg circle {
            fill: #fff;
}

Optional Enhancements

You can take your design a step further by:

  • Adding tooltip text on hover for each social media platform.

  • Adding animations such as bouncing, fading, or rotating effects to make your buttons even more engaging.

  • Experimenting with CSS gradients and shadows to create unique effects for each platform.

Conclusion

With a little bit of HTML and CSS, you can create beautiful, eye-catching social media buttons with a hover effect. The hover effect makes your design more interactive and visually appealing, increasing the chances of engagement with your users.

How to Create Eye-Catchy Media Icon Buttons with Hover Effect

File Name: eye-catching-social-media-icon-buttons.html

<!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 icon with effect</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet"> 
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Heebo', sans-serif;
        }

        :root {
            --facebook: #3a5796;
            --twitter: #1c9ceb;
            --linkedin: #0371ae;
            --instagram: #d12c7a;
        }

        body { background-color: #383838; }

        section {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
        }

        nav {
            width: 450px;
            display: flex;
            justify-content: space-between;
        }

        a {
            width: 80px;
            height: 80px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 100%;
            box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
            position: relative;
            transition: 0.3s all ease-in-out;
        }

        a:hover {
            background-color: transparent;
        }

        a::before {
            content: '';
            position: absolute;
            border-radius: 100%;
            width: 0;
            height: 0;
            background-color: #fff;
            transition: 0.3s all ease-in-out;
            z-index: 1;
        }

        a:hover::before {
            width: 100%;
            height: 100%;
        }

        a.facebook:hover::before {
            background-color: var(--facebook);
        }

        a.twitter:hover::before {
            background-color: var(--twitter);
        }

        a.linkedin:hover::before {
            background-color: var(--linkedin);
        }

        a.instagram:hover::before {
            background-color: var(--instagram);
        }

        a::after {
            content: '';
            position: absolute;
            border-radius: 100%;
            width: 0;
            height: 0;
            z-index: 1;
            transition: 0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: #fff solid 3px;
        }

        a:hover::after {
            width: 120%;
            height: 120%;
        }

        a svg {
            width: 30px;
            height: 30px;
            position: relative;
            z-index: 10;
        }

        a svg path,
        a svg circle {
            transition: 0.3s all ease-in-out;
        }

        a:hover svg path,
        a:hover svg circle {
            fill: #fff;
        }
        
    </style>
</head>
<body>
    <section>
        <nav>
            <a href="" class="facebook">
                <svg viewBox="0 0 126.22 246"><path d="M173.6,27h35.92V70.19h-29.7c-15,2.39-14,19.79-14,19.79v29.33h47.27l-7.05,47.52H166.33V273H119.19V166.09H86.89V119.31h32.3V87.74A68.5,68.5,0,0,1,127,55.49c5.27-9.87,14-20.18,28.41-25.47A53,53,0,0,1,173.6,27Z" transform="translate(-86.89 -27)"/></svg> 
            </a>
            <a href="" class="twitter">
                <svg viewBox="0 0 245.97 198.8"><path d="M44.28,59.23S89.07,113,147.62,111C140.12,86,172.14,21.7,234,65.49c0,0,24.77-5.26,32.28-12.51,0,0-3.5,14.76-20.77,27.52,0,0-1.25,2.5,27.53-6.76,0,0-12.27,16.77-25.28,26,0,0,7.18,101-91.91,141,0,0-60.72,26.69-128.79-14,0,0,40.71,6.67,74.4-20.69,0,0-38.36-3.67-46.37-35.36,0,0,13.35,3.67,22-1,0,0-36-4-39.7-49.71,0,0,17,7.33,22.35,6.33C59.71,126.37,23.85,104.52,44.28,59.23Z" transform="translate(-27.01 -50.6)"/></svg>
            </a>
            <a href="" class="linkedin">
                <svg viewBox="0 0 244.65 226.28"><path d="M35.73,81.63a24.22,24.22,0,0,1-8-18.5,24.59,24.59,0,0,1,8-18.79q8.06-7.47,20.76-7.48,12.43,0,20.48,7.48a24.59,24.59,0,0,1,8,18.79,24.22,24.22,0,0,1-8,18.5q-8,7.5-20.48,7.49Q43.79,89.12,35.73,81.63ZM80.5,105.51V263.14H32.2V105.51Z" transform="translate(-27.68 -36.86)"/><path d="M255.8,121.75q16.51,17.94,16.52,49.3v92.09h-48v-85.6q0-15.81-8.19-24.57t-22-8.76q-13.84,0-22,8.76t-8.2,24.57v85.6H115.53V105.51h48.31v20.9a51.15,51.15,0,0,1,19.78-16.53,63,63,0,0,1,28-6.07Q239.27,103.81,255.8,121.75Z" transform="translate(-27.68 -36.86)"/></svg>
            </a>
            <a href="" class="instagram">
                <svg viewBox="0 0 246.15 246.15"><path d="M201,51.5A47.49,47.49,0,0,1,248.41,99V200.88A47.49,47.49,0,0,1,201,248.32H99a47.49,47.49,0,0,1-47.44-47.44V99A47.49,47.49,0,0,1,99,51.5H201m0-24.66H99A72.11,72.11,0,0,0,26.92,99V200.88A72.12,72.12,0,0,0,99,273H201a72.12,72.12,0,0,0,72.11-72.11V99A72.11,72.11,0,0,0,201,26.84Z" transform="translate(-26.92 -26.84)"/><path class="cls-1" d="M150,124.34a25.57,25.57,0,1,1-25.57,25.57A25.6,25.6,0,0,1,150,124.34m0-24.66a50.24,50.24,0,1,0,50.23,50.23A50.23,50.23,0,0,0,150,99.68Z" transform="translate(-26.92 -26.84)"/><circle class="cls-1" cx="189.98" cy="55.33" r="13.81"/></svg>
            </a>
        </nav>
    </section>
</body>
</html>

Result Screenshot(s)

How to Create Eye-Catchy Media Icon Buttons with Hover EffectWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.