Animated Social Media Icon

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #4f5352;
    margin: 0;
  }
  
  .social-wrapper {
    display: flex;
    gap: 25px;
  }
  
  .social-icon {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%; /* Makes them circular */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 24px;
    color: #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    
    /* Smooth transition for all properties */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  /* General Hover Animation */
  .social-icon:hover {
    transform: translateY(-10px) scale(1.15);
    color: #fff;
  }
  
  /* Brand Specific Colors on Hover */
  .facebook:hover {
    background-color: #1877F2;
    box-shadow: 0 10px 20px rgba(24, 119, 242, 0.4);
  }
  
  .x-twitter:hover {
    background-color: #000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  }
  
  .instagram:hover {
    background-color: #E4405F;
    box-shadow: 0 10px 20px rgba(228, 64, 95, 0.4);
  }
  
  .github:hover {
    background-color: #333;
    box-shadow: 0 10px 20px rgba(51, 51, 51, 0.4);
  }

- Animated Social Media Icon

Live Preview