Social Media Link Hover Effects: HTML & CSS @rayen-code

Rayen

Social media icons are essential for website engagement and user interaction. Adding a style to these icons can draw attention to your social presence and make them stand out. In this tutorial, we'll guide you through the process of creating a captivating social media icon hover effect using HTML and CSS. Enhance your website's aesthetics and user engagement with this eye-catching design element.




Step 1: HTML Markup:

Start by setting up the basic HTML structure for your webpage. Include <i> elements for each social media icon, and use appropriate icons or images for each platform.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socil icon Design</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="social">
        <span class="icon">
            <i class="fa-brands fa-instagram"></i>
        </span>
        <span class="bg"></span>
    </div>

</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) to style the social media icons and define the hover effect.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    gap: 30px;
}
.social {
    position: relative;
    width: 45px;
    height: 45px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 10px;
}
.social .icon {
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    color: white;
    z-index: 2;
    border: 1px solid hsla(0, 0%, 61%, 0.466);
    backdrop-filter: blur(4px);
    border-radius: 9px;
    transition: 0.3s;
   
}

.social .bg {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        #f09433 0%,
        #e6683c 25%,
        #dc2743 50%,
        #cc2366 75%,
        #bc1888 100%
    );
    border-radius: 9px;
    pointer-events: none;
    transition: 0.3s;
}
.social:hover .bg {
    rotate: 35deg;
    transform-origin: bottom;
}
.social:hover .icon {
    background: hsla(0, 0%, 61%, 0.466);
}

You can customize the icon colors, sizes, and hover effects to match your website's design. Experiment with different background colors and shadow properties to achieve the desired visual effect.

Congratulations! You've successfully created a captivating social media icon hover effect using HTML and CSS. This stylish element can significantly enhance your website's aesthetics and encourage user engagement with your social media profiles.

Feel free to implement this hover effect on your website's social media icons to create a memorable and visually appealing user experience. The skills you've acquired in this tutorial will help you add eye-catching design elements to your web projects and improve user interaction.

0 Comments