Social Media Icon Glow Effects: HTML and CSS Tutorial @rayen-code

Rayen

Social media icons are essential for website engagement and user interaction. Adding a stylish glow effect 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 glow 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 icon</title>
    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>


<div class="icons">

    <div class="btn btn-dc">
        <i class="bi bi-discord discord"></i>
    </div>
    
    <div class="btn btn-pt">
        <i class="bi bi-pinterest pinterest"></i>
    </div>
    
    <div class="btn btn-tg">
        <i class="bi bi-telegram telegram"></i>
    </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 glow effect.
/*-------------------- CSS --------------------*/
body{
    margin: 0;
    padding: 0;
    background: white;
    min-height: 100vh;
}

.icons{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.btn{
    width: 100px;
    height: 100px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px;
    cursor: pointer;
    border-radius: 10px;
    transition: 0.3s all;
}

.btn i{
    font-size: 40px;
}

.discord{
    color: #006fff;
    text-shadow: 0 0 30px #006effc9;
}

.btn-dc{
    box-shadow:  0 20px 20px -17px #006effa9;
}

.btn-dc:hover{
    transform: scale(1.2);
    box-shadow:  0 30px 45px -12px #006eff8d;
}

.pinterest{
    color: #ff5f40;
    text-shadow: 0 0 30px #ff6040bc;
}

.btn-pt{
    box-shadow: 0 20px 20px -17px #ff6040bc;
}
.btn-pt:hover{
    transform: scale(1.2);
    box-shadow: 0 30px 40px -12px #ff6040c2;
}
.telegram{
    color: #00acff;
    text-shadow: 0 0 30px #00aaffb6;
}
.btn-tg{
    box-shadow: 0 20px 20px -17px #00aaffb6;
}

.btn-tg:hover{
    transform: scale(1.2);
    box-shadow: 0 30px 40px -12px #00aaffc9;
}

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

Congratulations! You've successfully created a captivating social media icon glow 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 glow 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