Creating a Stylish Social links profile with Dynamic Button Animations

#html #webdev #css #design

Overview
In this article, we'll walk through the process of designing a visually appealing Social Links profile using HTML and CSS. We'll focus on creating animated hover effects, such as color transitions and gradient button animations, and incorporating FontAwesome icons to enhance user interaction. Gradient Background Animation: Animated gradient background effect on hover. FontAwesome Icons: Includes icons for various social platforms. The most interesting of them is the changing color of the buttons when hovering. Button animation provides interactivity that is interesting to the user.

Designing Social links profile Interface
Our Social links profile features a clean and modern design, encapsulating an image and textual content within a flexible, responsive container. The HTML structure is straightforward, consisting of buttons on profile links.

HTML Structure
Here’s the basic HTML structure for our Social links profile project:

<div class="profile-container">
        <!-- title and description section -->
        <h1>My Social Links</h1>
        <p>I am Frontend Developer Evgeny Kozelskiy</p>
        <!-- Social Links -->
        <ul class="social-links">
            <!-- Email link -->
        <li class="link"><a href="mailto:superlern4@gmail.com" aria-label="Send an email to Evgeny Kozelskiy"> <i class="fa-solid fa-envelope" aria-hidden="true"></i>Email</a></li>
          <!-- Github link -->
        <li class="link"><a href="https://github.com/Der12kl" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's Github profile">  <i class="fa-brands fa-github" aria-hidden="true"></i> Github</a></li>
          <!-- Frontend Mentor -->
        <li class="link"><a href="https://www.frontendmentor.io/profile/Der12kl" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's Frontend Mentor profile">  <img src="frontendmentor.svg" alt="Frontend Mentor Icon" class="social-icon" aria-hidden="true"> Frontend Mentor</a></li>
          <!-- LinkedIn link -->
        <li class="link"><a href="https://linkedin.com/in/evgeny-kozelskiy-4501332b8" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's LinkedIn profile"><i class="fa-brands fa-linkedin" aria-hidden="true"></i>LinkedIn</a></li>
          <!-- X (formerly Twitter) link -->
        <li class="link"><a href="https://x.com/Evgeny9281" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's X (formerly Twitter)"> <i class="fa-brands fa-x-twitter" aria-hidden="true"></i>X</a></li>
          <!-- CodePen link -->
        <li class="link"><a href="https://codepen.io/Der12kl" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's CodePen profile"> <i class="fa-brands fa-codepen" aria-hidden="true"></i>CodePen</a></li>
          <!-- Stack Overflow link -->
        <li class="link"><a href="https://stackoverflow.com/users/23512541/evgeny" target="_blank"  rel="noopener noreferrer"  aria-label="Visit Evgeny Kozelskiy's Stack Overflow profile">  <i class="fa-brands fa-stack-overflow" aria-hidden="true"></i> Stack Overflow</a></li>
          <!-- Dev.to link -->
        <li class="link"><a href="https://dev.to/der12kl" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's Dev.to profile"> <i class="fa-brands fa-dev" aria-hidden="true"></i> Dev.to</a></li>
    </ul>
  </div>

Dynamic Buttons Animation A key feature of this design is the animated buttons, which transitions through a sequence of vibrant colors. This effect is achieved using CSS animations and variables:

* {
    transition: all 0.3s ease; 
} 
.social-links a {
  text-decoration: none;
  color: #fff;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  transition: color 0.3s ease, transform 0.3s ease;
  gap: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
}
.social-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, red , yellow, green, blue, purple); 
    border-radius: 5px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-size: 400%;
    animation: gradientAnimation 3s linear infinite; 
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

CSS Styling
Below is the CSS used to style the Social links profile :

/* Profile Container */
.profile-container {
   background: rgb(16, 41, 167);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
   text-align: center;
   width: 100%;
   max-width: 400px;
}

/* Social Links Styles */
.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.social-links li {
    margin: 10px 0;
}

.social-links a {
  text-decoration: none;
  color: #fff;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  transition: color 0.3s ease, transform 0.3s ease;
  gap: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
}

/* Social Icon Styles */
.social-links .social-icon,
.social-links i {
    width: 40px; 
    height: 40px;  
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.5); 
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-links img.social-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}


.social-links .fa-brands {
    font-size: 30px; 
}

.social-icon {
    background-color: rgba(0, 0, 0, 0.5);
}

.link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 1;
}

.link a {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
}

Enhancing User Experience The animated background serves as more than just an eye-catching feature; it helps in creating a more immersive and interactive experience. Users are greeted with a lively and modern interface that makes the content more inviting. Additionally, hover effects include an animated multi-colored animation button.

Further Learning and Resources
For those looking to dive deeper into CSS animations and advanced styling techniques, the MDN Web Docs offer a comprehensive guide. You can explore how to create and manage animations, use CSS variables, and implement advanced visual effects to bring your projects to life.

Conclusion
Incorporating dynamic button animations into your web projects can significantly improve user engagement and satisfaction. By leveraging CSS animations, you can create visually captivating elements that not only look great but also enhance the overall user experience. Experiment with different animations and styles to add a unique touch to your designs and captivate your audience.

For a live demo of the Social links profile with dynamic animations, check out the project on gihub.