Social Share Button

ankushsingh
Jan 14, 2026 17
Live Preview

Live Editor

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

<div class="sharing-container">
  <div class="toggle-wrapper">
    <div class="share-toggle">
      <i class="fa-solid fa-share-nodes"></i>
      <span class="share-text">Share</span>
    </div>

    <div class="social-list">
      <a href="#" class="social-btn instagram" style="--d: 1;" title="Instagram">
        <i class="fa-brands fa-instagram"></i>
      </a>
      <a href="#" class="social-btn facebook" style="--d: 2;" title="Facebook">
        <i class="fa-brands fa-facebook-f"></i>
      </a>
      <a href="#" class="social-btn twitter" style="--d: 3;" title="Twitter">
        <i class="fa-brands fa-x-twitter"></i>
      </a>
    </div>
  </div>
</div>
:root {
  --toggle-grad: linear-gradient(135deg, #D70000, #FF3164);
  --insta-color: #00CB0A;
  --fb-color: #066DFF;
  --tw-color: #FF1B1B;
  --bg-soft: #FBFBFB;
  --shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Stronger drop shadow */
}

body {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

.sharing-container {
  background: var(--bg-soft);
  padding: 60px 100px;
  border-radius: 12px;
  border: 1px solid #ECECEC;
}

.toggle-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.share-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--toggle-grad);
  color: white;
  padding: 12px 25px;
  border-radius: 50px;
  z-index: 10;
  box-shadow: var(--shadow);
}

.social-list {
  display: flex;
  gap: 15px;
  padding-left: 0px;
  pointer-events: none; /* Prevents clicking icons while hidden */
}

.social-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 20px;
  background: white;
  border: 1px solid #ECECEC;
  box-shadow: var(--shadow);
  
  /* Initial State: Hidden and shifted left */
  opacity: 0;
  transform: translateX(-20px);
  
  /* Transition handles the Fade and Move */
  /* The delay is calculated based on the --d variable in HTML */
  transition: all 0.4s ease;
  transition-delay: calc(var(--d) * 0.1s);
}

/* Custom Colors */
.instagram { color: var(--insta-color); border-color: var(--insta-color); }
.facebook { color: var(--fb-color); border-color: var(--fb-color); }
.twitter { color: var(--tw-color); border-color: var(--tw-color); }

/* Hover Logic: Staggered Appearance */
.toggle-wrapper:hover .social-list {
  pointer-events: auto;
}

.toggle-wrapper:hover .social-btn {
  opacity: 1;
  transform: translateX(20px); /* Moves icons out to the right */
}

/* Hover effect on individual buttons */
.social-btn:hover {
  transform: translateX(20px) translateY(-5px) !important;
  transition-delay: 0s !important; /* Remove delay when hovering locally */
}
Categories

Social Share Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
