Animated Social Media Icons with Glowing Border | HTML & CSS

Create Animated Social Media Icons with Glowing Golden Borders – Using Only HTML & CSS

If you're looking to elevate your website's footer or contact section with stunning animated social media icons, you've come to the right place. In this tutorial, we’ll showcase a beautiful, mobile-friendly social media icon set created using only HTML and CSS — no JavaScript, no external libraries.

This project includes hover animations, rotating golden borders, and a soft floating background animation to give your UI a premium look and feel.

What Makes This Project Special?

Modern websites demand modern design. Rather than using static icons, this project introduces subtle but attractive visual cues that make your social media links stand out.

Here’s what sets it apart:

✅ Elegant Golden Border Animation: Each icon is surrounded by a glowing circular border that continuously rotates, creating an eye-catching golden shimmer.
✅ Fully Responsive Layout: The layout automatically adjusts for desktops, tablets, and mobile devices. Perfect for any screen size.
✅ Floating Background Animation: Adds depth with floating orbs in the background, giving a dynamic visual experience.
✅ No JavaScript Required: Everything is built with clean, modern HTML and CSS — easy to understand and beginner-friendly.
✅ Custom Cursor Pointer + Smooth Hover Effects: Enhances interactivity and UX with scaling and shadow animations on hover.
✅ Great for Portfolios, Agencies, and Blogs: Whether you’re showcasing your brand or linking to your social profiles, this design works universally.

Where Can You Use It?

This animated icon layout can be easily integrated into:

Personal Portfolio Websites
Blogs & Online Magazines
Business Landing Pages
App or Product Showcases
Contact Us Sections

If you're looking for something minimal yet attractive that adds a touch of class to your website — this is a perfect fit.

⚙️ How to Use This Code?

All you need is to copy the HTML and CSS code from the tutorial on this page and paste it directly into your project. No dependencies, no setup — just clean and reusable frontend code.

You can customize:

Social media icon images
Border colors and gradients
Icon size and spacing
Link destinations (e.g., Facebook, Instagram, LinkedIn, etc.)

Why You Should Try This UI Element

In the world of web design, little details make a big difference. Animated, glowing icons like these:

Improve user engagement
Increase the chances of visitors clicking your social links
Show that you care about detail and design
Make your website feel more alive and interactive

Plus, this project is a great learning experience for understanding animations, pseudo-elements, responsive layouts, and creative use of CSS gradients.

Final Thoughts

Adding a small UI element like these animated social media icons can significantly boost your site’s aesthetics and professionalism. The glowing border effect, combined with fluid motion and responsive behavior, makes it suitable for virtually any modern website.

So go ahead — copy the code, customize it for your needs, and impress your visitors with a visually rich and polished social media section.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Social Icons with Animated Background</title>
  <link rel="stylesheet" href="styles.css">

</head>
<body>

  <div class="background">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

  <div class="social-container">
    <div class="social-icon">
      <img src="https://img.icons8.com/color/48/facebook.png" alt="Facebook">
    </div>
    <div class="social-icon">
      <img src="https://img.icons8.com/color/48/instagram-new.png" alt="Instagram">
    </div>
    <div class="social-icon">
      <img src="https://img.icons8.com/color/48/twitter--v1.png" alt="Twitter">
    </div>
    <div class="social-icon">
      <img src="https://img.icons8.com/color/48/linkedin.png" alt="LinkedIn">
    </div>
    <div class="social-icon">
      <img src="https://img.icons8.com/color/48/youtube-play.png" alt="YouTube">
    </div>
  </div>

</body>
</html>

CSS Code

 
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      height: 100vh;
      background: #0f0f0f;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      font-family: 'Segoe UI', sans-serif;
    }

    /* Background Animation */
    .background {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 0;
    }

    .background span {
      position: absolute;
      display: block;
      width: 30px;
      height: 30px;
      background: rgba(255, 255, 255, 0.05);
      animation: animateBg 20s linear infinite;
      border-radius: 50%;
      filter: blur(4px);
    }

    .background span:nth-child(1) {
      left: 10%;
      top: 20%;
      width: 60px;
      height: 60px;
    }

    .background span:nth-child(2) {
      left: 70%;
      top: 40%;
    }

    .background span:nth-child(3) {
      left: 30%;
      top: 80%;
    }

    .background span:nth-child(4) {
      left: 90%;
      top: 10%;
    }

    .background span:nth-child(5) {
      left: 50%;
      top: 50%;
      width: 80px;
      height: 80px;
    }

    @keyframes animateBg {
      0% {
        transform: scale(1) translateY(0px);
        opacity: 0.3;
      }
      50% {
        transform: scale(1.3) translateY(-100px);
        opacity: 0.1;
      }
      100% {
        transform: scale(1) translateY(0px);
        opacity: 0.3;
      }
    }

    /* Social Icons */
    .social-container {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 25px;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }

    .social-icon {
      position: relative;
      width: 65px;
      height: 65px;
      border-radius: 50%;
      background: #111;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.4s ease;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(255,255,255,0.05);
    }

    .social-icon::before {
      content: '';
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: radial-gradient(circle, #00fff7, transparent 70%);
      border-radius: 50%;
      opacity: 0;
      transition: 0.4s ease;
      z-index: -1;
    }

    .social-icon:hover {
      transform: scale(1.15);
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    }

    .social-icon:hover::before {
      opacity: 1;
    }

    .social-icon img {
      width: 60px;
      height: 60px;
      filter: brightness(1.4);
    }

    /* Mobile responsiveness */
    @media (max-width: 600px) {
      .social-icon {
        width: 55px;
        height: 55px;
      }

      .social-icon img {
        width: 56px;
        height: 56px;
      }

      .social-container {
        gap: 18px;
        padding: 0 15px;
      }
    }

JavaScript Code

No Need

PHP Code

NO Need

FAQ Section

❓1. What are animated social media icons?

Answer:
Animated social media icons are visually interactive icons that use effects like hover scaling, glowing borders, or floating motion to attract user attention and improve UI/UX.

❓2. Can I use this icon layout on mobile devices?

Answer:
Yes! This social icon set is fully responsive and mobile-friendly. It automatically adapts to different screen sizes without breaking the layout or animations.

❓3. Do I need JavaScript for this animation?

Answer:
Not at all. The entire animation is created using pure HTML and CSS, making it lightweight and easy to implement — even for beginners.

❓4. Can I change the icon colors or shapes?

Answer:
Yes, you can customize everything — icon size, shape, border color, gradient style, and even add your own SVG or PNG icons for a personalized look.

❓5. Is this code free to use?

Answer:
Absolutely. This code is provided free of cost on AlertCampusGenius.com. You are welcome to copy and modify it for personal or commercial use.

Share Your Thoughts!
Have you used these animated icons on your site? Let us know in the comments!
Your feedback helps us improve and create even more free design components for developers like you. ✨

Animated Social Media Icons with Glowing Border | HTML & CSS

Create stylish social media icons with golden animated borders using pure HTML & CSS. Fully responsive, mobile-friendly, and beginner-friendly code.

Create Animated Social Media Icons with Glowing Golden Borders – Using Only HTML & CSS

What Makes This Project Special?

Where Can You Use It?

⚙️ How to Use This Code?

Why You Should Try This UI Element

Final Thoughts

HTML Code

CSS Code

JavaScript Code

PHP Code

FAQ Section

❓1. What are animated social media icons?

❓2. Can I use this icon layout on mobile devices?

❓3. Do I need JavaScript for this animation?

❓4. Can I change the icon colors or shapes?

❓5. Is this code free to use?

Leave a Comment: 👇

Log In

Animated Social Media Icons with Glowing Border | HTML & CSS

Create stylish social media icons with golden animated borders using pure HTML & CSS. Fully responsive, mobile-friendly, and beginner-friendly code.

Create Animated Social Media Icons with Glowing Golden Borders – Using Only HTML & CSS

What Makes This Project Special?

Where Can You Use It?

⚙️ How to Use This Code?

Why You Should Try This UI Element

Final Thoughts

HTML Code

CSS Code

JavaScript Code

PHP Code

FAQ Section

❓1. What are animated social media icons?

❓2. Can I use this icon layout on mobile devices?

❓3. Do I need JavaScript for this animation?

❓4. Can I change the icon colors or shapes?

❓5. Is this code free to use?

Leave a Comment: 👇