Crafting a Custom CSS-Powered Animated Social Share Button: A Beginner’s Tutorial

Written by

learnmodernwebdevelopment

in

In the digital age, sharing content across social media platforms is crucial for online visibility. As web developers, we often integrate social sharing buttons into our websites to make this process seamless for users. While many plugins and libraries offer pre-built solutions, understanding how to create custom, animated social share buttons with CSS not only gives you greater control over their appearance and functionality but also provides a valuable learning experience. This tutorial guides beginners and intermediate developers through the process of building a visually appealing and interactive social share button using only HTML and CSS.

Why Custom Social Share Buttons?

Before diving into the code, let’s explore why crafting custom social share buttons is beneficial:

  • Branding Consistency: Custom buttons allow you to match your website’s design and branding.
  • Performance: Avoid bulky plugins that can slow down your site’s loading speed.
  • Customization: Tailor the button’s appearance, animation, and behavior to your specific needs.
  • Learning: Enhance your CSS skills and gain a deeper understanding of web design principles.

Project Overview: Animated Social Share Button

In this tutorial, we will create a social share button that:

  • Displays an initial icon (e.g., a share icon).
  • Upon hover, expands to reveal social media icons (Facebook, Twitter, LinkedIn, etc.).
  • Each social media icon will have a subtle animation.
  • The button will be fully responsive and adapt to different screen sizes.

Step-by-Step Guide

1. HTML Structure

First, we’ll set up the basic HTML structure. This will include a container for the share button and individual elements for each social media icon. Create an HTML file (e.g., `index.html`) and add the following code:

<div class="share-button-container">
  <button class="share-button">
    <i class="fas fa-share-alt"></i> <!-- Font Awesome share icon -->
  </button>
  <div class="social-icons">
    <a href="#" class="social-icon facebook"><i class="fab fa-facebook-f"></i></a>
    <a href="#" class="social-icon twitter"><i class="fab fa-twitter"></i></a>
    <a href="#" class="social-icon linkedin"><i class="fab fa-linkedin-in"></i></a>
    <a href="#" class="social-icon email"><i class="fas fa-envelope"></i></a>
  </div>
</div>

Let’s break down the HTML:

  • `share-button-container`: This is the main container that holds the entire share button component.
  • `share-button`: This is the button that the user will click or hover over to trigger the social media icons. We’ll use a Font Awesome icon for the share symbol.
  • `social-icons`: This div contains the individual social media icons.
  • `social-icon`: Each social media icon is an `` tag with a specific class for styling. We’ll use Font Awesome icons here as well.

Important Note: To use Font Awesome icons, you need to include the Font Awesome CSS in your HTML file. You can either link to a CDN (Content Delivery Network) or download the files and host them locally. Here’s how to include the CDN link within the “ section of your HTML:

<head>
  <!-- Other meta tags -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

2. Basic CSS Styling

Next, we’ll add some basic CSS to style the share button and its elements. Create a CSS file (e.g., `style.css`) and link it to your HTML file. Start with the following styles:

/* style.css */

.share-button-container {
  position: relative;
  display: inline-block;
}

.share-button {
  background-color: #3498db; /* A nice blue color */
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.share-button i {
  margin-right: 5px;
}

.social-icons {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: #f0f0f0; /* Light gray background */
  border-radius: 5px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1; /* Ensure it appears above other elements */
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  text-decoration: none;
  color: #333; /* Dark gray color */
  transition: all 0.3s ease;
}

.social-icon i {
  margin-right: 5px;
}

.social-icon.facebook {
  background-color: #3b5998;
  color: white;
}

.social-icon.twitter {
  background-color: #1da1f2;
  color: white;
}

.social-icon.linkedin {
  background-color: #0077b5;
  color: white;
}

.social-icon.email {
  background-color: #bbbbbb;
  color: white;
}

Here’s a breakdown of the CSS:

  • `.share-button-container`: Sets the container’s position to `relative` to allow absolute positioning of the social icons.
  • `.share-button`: Styles the main share button, including the background color, text color, padding, and border-radius.
  • `.social-icons`: Positions the social icons absolutely below the share button. Initially, it’s hidden using `opacity: 0` and `visibility: hidden`.
  • `.social-icon`: Styles each individual social media icon, setting the background color, text color, padding, and removing the text decoration.
  • Specific styles for each social media icon (`.facebook`, `.twitter`, etc.) provide distinct background colors.

3. Hover Effect and Animation

Now, let’s add the hover effect to reveal the social icons. This is where the animation comes into play. We’ll use the `:hover` pseudo-class to change the styles when the user hovers over the share button.


.share-button-container:hover .social-icons {
  opacity: 1;
  visibility: visible;
}

.share-button-container:hover .social-icon {
  /* Add animation here */
}

This code targets the `.social-icons` when the `.share-button-container` is hovered. It changes the `opacity` to `1` and sets `visibility` to `visible`, making the social icons appear. Now, to add a simple animation to the social icons when the `.share-button-container` is hovered, we can use the `transform` property to make the icons slide up from below.


.social-icon {
  /* existing styles */
  transform: translateY(100%); /* Initially position icons below the button */
  transition: all 0.3s ease;
}

.share-button-container:hover .social-icon {
  transform: translateY(0); /* Move icons to their original position */
}

.social-icon:nth-child(1) {
  transition-delay: 0.1s;
}

.social-icon:nth-child(2) {
  transition-delay: 0.2s;
}

.social-icon:nth-child(3) {
  transition-delay: 0.3s;
}

.social-icon:nth-child(4) {
  transition-delay: 0.4s;
}

This code snippet does the following:

  • **`transform: translateY(100%);`**: Initially positions each social icon below the share button.
  • **`transition: all 0.3s ease;`**: Ensures a smooth transition for all changes.
  • **`transform: translateY(0);`**: When hovered, this moves the icons to their original position, revealing them.
  • **`transition-delay`**: Adds a slight delay to each icon’s animation to create a cascading effect.

4. Improving the Animation with Keyframes

While the `translateY` animation is a good start, we can further enhance the animation using CSS keyframes. This allows for more complex and controlled animations. Let’s create a scale animation for each social icon. We will use `scale` to make them slightly increase in size as they appear.


.social-icon {
  /* existing styles */
  transform: translateY(100%) scale(0);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.share-button-container:hover .social-icon {
  transform: translateY(0) scale(1);
}

.social-icon:nth-child(1) {
  transition-delay: 0.1s;
}

.social-icon:nth-child(2) {
  transition-delay: 0.2s;
}

.social-icon:nth-child(3) {
  transition-delay: 0.3s;
}

.social-icon:nth-child(4) {
  transition-delay: 0.4s;
}

Here’s what the updated code does:

  • **`transform: translateY(100%) scale(0);`**: Initially positions each social icon below the share button and scales them down to 0, making them invisible.
  • **`transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);`**: Uses a `cubic-bezier` timing function to create a more dynamic and interesting animation effect. Experiment with different values to find an animation that suits your needs.
  • **`transform: translateY(0) scale(1);`**: When hovered, this moves the icons to their original position and scales them back to their original size.
  • **`transition-delay`**: Adds a slight delay to each icon’s animation to create a cascading effect.

5. Making the Button Responsive

To ensure the share button looks good on all devices, we need to make it responsive. This mainly involves adjusting the layout for smaller screens. We can achieve this using media queries. Add the following code to your `style.css` file:


/* Responsive Design */
@media (max-width: 600px) {
  .share-button-container {
    display: block; /* Stack elements on smaller screens */
    text-align: center;
  }

  .social-icons {
    position: static; /* Remove absolute positioning */
    display: inline-block; /* Display icons horizontally */
    margin-top: 10px; /* Add some space between button and icons */
    opacity: 1 !important; /* Ensure icons are always visible on smaller screens */
    visibility: visible !important;
  }

  .social-icon {
    margin: 5px; /* Add space between icons */
  }

  .share-button {
    margin-bottom: 10px;
  }

}

Explanation of the responsive design code:

  • **`@media (max-width: 600px)`**: This media query applies the styles only when the screen width is 600px or less.
  • **.share-button-container** : Sets the container display to block and text-align to center to stack the button and icons vertically.
  • **.social-icons**: Removes the absolute positioning and sets display to inline-block to display the icons horizontally. Adds a margin to separate the share button and icons. Sets opacity and visibility to ensure the icons are always visible on smaller screens.
  • **.social-icon**: Adds margin to create space between the social icons in the horizontal layout.
  • **.share-button**: Adds a margin at the bottom to create space between the share button and the social icons.

6. Adding Functionality (JavaScript – Optional)

While this tutorial focuses on the CSS animation, you’ll likely want to add functionality to the social share buttons. This involves using JavaScript to handle the sharing actions. Here’s a basic example of how you can add JavaScript to handle the sharing functionality. Create a JavaScript file (e.g., `script.js`) and link it to your HTML file before the closing `</body>` tag:

<script src="script.js"></script>

Add the following JavaScript code to `script.js`:


// script.js

const shareButton = document.querySelector('.share-button');
const socialIcons = document.querySelectorAll('.social-icon');

shareButton.addEventListener('click', (event) => {
  event.preventDefault(); // Prevent default button behavior
  // You can add additional logic here if needed
});

socialIcons.forEach(icon => {
  icon.addEventListener('click', (event) => {
    event.preventDefault(); // Prevent default link behavior
    const platform = icon.classList[1]; // Get the social media platform from the class name
    let shareUrl = '';
    const pageUrl = encodeURIComponent(window.location.href); // Get the current page URL
    const pageTitle = encodeURIComponent(document.title); // Get the current page title

    switch (platform) {
      case 'facebook':
        shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;
        break;
      case 'twitter':
        shareUrl = `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`;
        break;
      case 'linkedin':
        shareUrl = `https://www.linkedin.com/shareArticle?url=${pageUrl}&title=${pageTitle}`;
        break;
      case 'email':
        shareUrl = `mailto:?subject=${pageTitle}&body=${pageUrl}`;
        break;
      default:
        return;
    }

    window.open(shareUrl, '_blank'); // Open the share URL in a new tab/window
  });
});

This JavaScript code does the following:

  • Gets references to the share button and social icons.
  • Adds a click event listener to the share button (optional, can be used for other actions).
  • Adds click event listeners to each social icon.
  • Gets the social media platform from the icon’s class name.
  • Constructs the share URL based on the platform.
  • Opens the share URL in a new tab/window.

Important: You’ll need to customize the `shareUrl` variables to match the specific social media platform’s sharing API. This example provides a basic implementation. You can further enhance this by including a page title and description to improve the user experience.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Font Awesome Setup: Make sure you’ve correctly included the Font Awesome CSS link in your HTML’s “. Double-check the CDN link or the path to your locally hosted files.
  • CSS Specificity Issues: If your styles aren’t applying, check for CSS specificity conflicts. Use more specific selectors or the `!important` rule (use sparingly).
  • Incorrect HTML Structure: Ensure you’ve correctly nested your HTML elements. For example, the social icons should be inside the `social-icons` div.
  • Animation Not Triggering: Ensure that your hover effect is correctly targeting the container, and that the element you’re trying to animate is within the hover scope.
  • Responsiveness Issues: Double-check your media queries and make sure they’re targeting the correct screen sizes. Test your design on different devices or using your browser’s developer tools.
  • JavaScript Errors: If you’re using JavaScript, open your browser’s developer console to check for any errors. Make sure you’ve linked the JavaScript file correctly.
  • Incorrect URL Encoding: The URL and title must be encoded for correct sharing. Use the `encodeURIComponent()` function in JavaScript.

Summary / Key Takeaways

In this tutorial, we’ve walked through the process of creating a custom, animated social share button using HTML and CSS. You’ve learned how to structure the HTML, style the button and icons, add a hover animation, make it responsive, and even integrate basic JavaScript for sharing functionality. By building this project, you’ve not only gained practical experience in CSS animation and layout but also learned how to create a more engaging and visually appealing user experience on your website.

FAQ

  1. Can I customize the animation further? Absolutely! Experiment with different CSS properties and animation techniques. You can change the animation duration, timing function, and use other properties like `rotate`, `scale`, and `opacity` to create unique effects.
  2. How do I add more social media icons? Simply add more `<a>` tags with the appropriate classes and Font Awesome icons within the `.social-icons` div. Remember to add corresponding styles in your CSS.
  3. How can I change the share button’s color scheme? Modify the background and text colors in the `.share-button` and `.social-icon` CSS rules. You can also customize the hover states to change the colors on hover.
  4. How can I make the share button accessible? Ensure proper ARIA attributes and keyboard navigation. Use meaningful alt text for icons and provide sufficient contrast between text and background colors.
  5. Can I use this on a WordPress site? Yes, you can integrate this code into a WordPress theme or use a plugin that allows you to add custom HTML and CSS. Make sure to include the Font Awesome CSS link in your theme’s `header.php` file or through your plugin’s settings.

By mastering the techniques covered in this tutorial, you’re well on your way to creating dynamic and engaging user interfaces. Remember, the best way to learn is by doing. Experiment with the code, try different animations, and customize the design to match your website’s style. This project serves as a foundation for more complex CSS animations and provides a solid base for creating a more interactive and visually appealing web presence.

More posts