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>Social Media link</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">


    <div class="link facebook">
        <div class="icon">
            <i class="fa-brands fa-facebook"></i>
        </div>
        <div class="text">Facebook</div>
    </div>

    <div class="link twitter">
        <div class="icon">
            <i class="fa-brands fa-twitter"></i>
        </div>
        <div class="text">Twitter</div>
    </div>
    <div class="link instagram">
        <div class="icon">
            <i class="fa-brands fa-instagram"></i>
        </div>
        <div class="text">Instagram</div>
    </div>
    <div class="link github">
        <div class="icon">
            <i class="fa-brands fa-github"></i>
        </div>
        <div class="text">Github</div>
    </div>
    <div class="link linkedin">
        <div class="icon">
            <i class="fa-brands fa-linkedin"></i>
        </div>
        <div class="text">Linkedin</div>
    </div>

</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 {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.social {
    display: flex;
    gap: 5px;
}

.link {
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 100px;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 10px #0003;
    transition: 0.3s;
}

.facebook {
    background: #0163e0;
}
.twitter {
    background: #1DA1F2;
}
.instagram {
    background: #cd486b;
}
.github {
    background: #212121;
}
.linkedin {
    background: #0077d5;
}




.link:hover {
    width: 150px;
}

.icon {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;

    transition: 0.3s;
}

.link:hover .icon {
    width: 30%;
}

.text {
    position: absolute;
    right: 0;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    width: 0;
    opacity: 0;
    transition: 0.3s;
}
.link:hover .text {
    width: 70%;
    opacity: 1;
}

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