Animated Share Button Design Using Html Css And Javascript

"Animated share button using HTML, CSS, and JavaScript can add an engaging and interactive element to your website. With these technologies, you can design a button that not only allows users to share content but also visually captivates them with smooth animations.

In this tutorial, we'll explore how to craft a share button that brings a touch of dynamism to your web pages, making sharing content an enjoyable experience for your visitors". For gsap animations you can follow this gsap playlist. You can gain further knowledge about web development by exploring the resources in this playlist.

01. Html
02. CSS
03. Script
04. Output
05. Youtube Video

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
 <head>
   <title>Animated Share Button Design Using Html Css And Javascript</title>
 </head>
 <body>
	// Content
 </body>
</html>

You can incorporate all the required links and dependencies into the HTML document using the code snippet provided below.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
  <title>Animated Share Button | Rustcode</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="font.css">
</head>
<body>

  <button class="share-btn" id="shareBtn">
    <i class="fa-solid fa-arrow-up-right-from-square share-icon"></i>
    <span class="social-icons">
      <i class="fa-brands fa-instagram"></i>
      <i class="fa-brands fa-facebook-f"></i>
      <i class="fa-brands fa-twitter"></i>
    </span>
  </button>

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

The code begins with the <!DOCTYPE html> declaration, indicating that it's an HTML document.
In the <head> section, it links to external resources, including Font Awesome icons, a custom CSS file named "style.css", and a custom font file named "font.css". It also sets the title of the page to "Animated Share Button | Rustcode".
Inside the <body> section, there's a <button> element with the class "share-btn" and an ID "shareBtn". This button contains an arrow-up-right icon and three social media icons (Instagram, Facebook, and Twitter) from the Font Awesome library.
Finally, there's a <script> tag that references an external JavaScript file named "script.js", which is likely used to add functionality to the share button.

Output:

Read Also:

CSS:

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

body {
  display: flex;
  height: 100vh;
  justify-content: center;   
  align-items: center;       
  background-color: #afe1af;
}

.share-btn {
  position: relative;      
  display: flex;
  justify-content: center;   
  align-items: center;       
  width: 2em;
  height: 2em;
  border-radius: 100vmax;    
  border: 0;
  font-size: 2rem;
  background-color: #fff;
  color: #008000;
  cursor: pointer;
  transition: width 300ms ease-in-out;
  transition-delay: 50ms;
  z-index: 1;
}

.share-btn::before {
  content: "x";
  position: absolute;
  left: 5px;
  font-size: 2.25rem;
  font-weight: 500;
  font-family: "Nunito", sans-serif;
  width: 1.5em;
  height: 1.5em;
  background-color: transparent;
  color: #fff;
  border-radius: inherit;
  z-index: -1;
  transition: background-color 300ms ease-in-out;
}

.social-icons {
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: calc(100% - 2em);
  height: 100%;
  right: 0;
  border-radius: inherit;
}

.fa-facebook-f,
.fa-twitter,
.fa-instagram {
  transform: scale(0);
  transition: transform 300ms ease-in-out;
}

.share-icon {
  transform: scale(1);
  transition: transform 300ms ease-in-out;
}

.share-btn.open {
  width: 8em;
}

.share-btn.open::before {
  background-color: #008000;
}

.share-btn.open :is(.fa-facebook-f, .fa-twitter, .fa-instagram) {
  transform: scale(1);
  color: #008000;
}

.share-btn.open .share-icon {
  transform: scale(0);
}

* and body:
The * selector with properties like margin and padding set to 0 ensures that there are no default margins or paddings on any elements.
The body selector styles the overall page, setting it as a flex container, centering its content both horizontally and vertically. It also provides a background color.
.share-btn:
This class styles the share button.
It's a circular button (border-radius) with a white background and green text color.
It has a subtle animation effect on its width and an "x" character inside.
.share-btn::before:
This pseudo-element styles the "x" character within the button.
It's positioned to the left of the button with a background color change animation.
.social-icons:
This class styles the container for social media icons.
It's positioned absolutely to the right of the button and is initially hidden.
.fa-facebook-f, .fa-twitter, .fa-instagram, .share-icon:
These classes style social media icons and the share icon within the container.
They have a scaling animation effect.
.share-btn.open:
This class is applied when the share button is open.
It widens the button and changes the background color.
.share-btn.open::before, .share-btn.open .share-icon, .share-btn.open :is(.fa-facebook-f, .fa-twitter, .fa-instagram):
These selectors apply styles to elements within the share button when it's open.
They control animations for the "x" character, social media icons, and the share icon.

Output:

Read Also:

SCRIPT:

let shareBtn = document.getElementById("shareBtn");

shareBtn.addEventListener("click", () => {
  shareBtn.classList.toggle("open");
});

It selects an HTML element with the ID "shareBtn" and stores it in the shareBtn variable.
It adds an event listener to the shareBtn element.
When the "click" event occurs (i.e., when the button is clicked), it toggles the "open" class on the shareBtn element. This means that if the element currently has the "open" class, it will be removed; if it doesn't have the "open" class, it will be added.

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Animated Share Button Design Using Html Css And Javascript", if you want to watch demo you can click on below video.

Read Also:

Archive